<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">Accordion title</span>
<span class="card-subtitle w-100">...and its subtitle</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom decorative" 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">
Accordion content
</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">accordion with titleClass and 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 decorative" 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">
Accordion content
</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">accordion with action button</span>
<span class="card-subtitle w-100 text-muted">Subtitle</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion btn-secondary">
<svg class="paris-icon paris-icon-arrow-bottom btn-secondary decorative" 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">
Accordion content of 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 decorative" 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">accordion with 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 decorative" 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">
Accordion content of 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">collapse accordion</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom decorative" 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">
Accordion content of type "Unfolded"
</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 decorative" 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">accordion with primary outline alert</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 decorative" 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">
Accordion content of 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 decorative" 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">accordion with primary outline alert</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">View details</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-warning-color-text decorative" 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)">
Accordion content of 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 decorative" 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">accordion with primary outline alert</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">View details</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-success-color-text decorative" 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)">
Accordion content of 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 decorative" 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">accordion with primary outline alert</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">View details</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-danger-color-text decorative" 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)">
Accordion content of 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">Example with border</span>
<span class="card-subtitle w-100">...and its subtitle</span>
</span>
<span class="accordion-toggle ms-auto">
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom decorative" 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">
Accordion content
</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 decorative" data-mce-svg="paris-icon paris-icon-alert-info" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-info"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Alert title - decorative</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 informative" data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-302811391401891" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-302811391401891">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Error message</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 informative" data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-307143548665761" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-307143548665761">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Error message</p>
</div>
</div>
<div class="alert-content">
Error content</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 informative" data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-311475705929631" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-311475705929631">Error</title>
<use href="#paris-icon-alert-danger"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Error message</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">
Error message and close button</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 informative" data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-315807863193501" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-315807863193501">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Warning message...</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 informative" data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-320140020457371" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-320140020457371">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Warning message...</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">
Content of the "warning" message</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 informative" data-mce-svg="paris-icon paris-icon-alert-check" aria-labelledby="paris-icon-alert-check-paris-title-324472177721241" focusable="false" role="img">
<title id="paris-icon-alert-check-paris-title-324472177721241">Success</title>
<use href="#paris-icon-alert-check"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Validation message...</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 informative" data-mce-svg="paris-icon paris-icon-alert-check" aria-labelledby="paris-icon-alert-check-paris-title-328804334985111" focusable="false" role="img">
<title id="paris-icon-alert-check-paris-title-328804334985111">Success</title>
<use href="#paris-icon-alert-check"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Validation message...</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>
<!-- With the new type parameter -->
<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 informative" data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-333136492248981" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-333136492248981">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Validation message...</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>
<!-- With the new isHtmlTitle parameter -->
<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 informative" data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-337468649512851" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-337468649512851">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<h3 class="alert-title mt-0">
Message with a level 3 HTML title</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>
Message content with a custom HTML title</li>
<li>
The title is level 3 thanks to the htmlTitleLevel parameter</li>
<li>
The isHtmlTitle parameter must be true for the title to be interpreted as 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>
Floating button example</h4>
<div class="btn-floating-toolbar">
<button class="btn btn-primary btn-floating" type="submit">
<span class="btn-label ">Floating button 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>
News - RSS feed
</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>
News - RSS feed
</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>
News - RSS feed
</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>
News - RSS feed
</span>
</button>
</div>

<h4>
Example 1</h4>
<div>
<div class="btn-group" role="group" aria-label="Home menu">
<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="Home menu">
<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>
Expandable cards</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">
Floating Card</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">
Floating Card</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">
Your selection</h3>
</div>
<div class="card-body">
<ul class="list-unstyled" >
<li>
<p class="d-flex align-items-start">
3 x Full-price admission at 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 decorative" 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 Full-price admission at 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 decorative" 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">
Floating Card 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">
Your selection</h3>
</div>
<div class="card-body">
<ul class="list-unstyled" >
<li>
<p class="d-flex align-items-start">
3 x Full-price admission at 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 decorative" 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 Full-price admission at 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 decorative" 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">
Default example</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 with 3 columns for the "md" breakpoint or 4 for the "lg" breakpoint</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>
Chance</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>
Does it well</h3>
<p>But not only...</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>
Things</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>
Chance</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>
Does it well</h3>
<p>But not only...</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>
Things</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 decorative" 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 decorative" 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>
Chance</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>
Does it well</h3>
<p>But not only...</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>
Things</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 decorative" 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 decorative" 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 decorative" 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 decorative" 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 decorative" 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>
Chance</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>
Does it well</h3>
<p>But not only...</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>
Things</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>
Content</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>
Title</h3>
<p>
Content</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>
Content</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>
content</p>
</div>
</details>
<details id='cascadFile1' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Planted pedestrian facilities</span></summary>
<div class="cascading-content">
<p>
Content</p>
</div>
</details>
<details id='cascadFile2' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Covered pedestrian passage to be preserved</span></summary>
<div class="cascading-content">
<p>
Content</p>
</div>
</details>
<details id='cascadFile3' class="cascading cascading-files" aria-expanded="false" >
<summary><span class="cascading-label ">Height cap: 31m</span></summary>
<div class="cascading-content">
<p>
Content</p>
</div>
</details>
<details id='cascadFile4' class="cascading cascading-files" open aria-expanded="true" >
<summary><span class="cascading-label ">Special provisions area: Miollis Site</span></summary>
<div class="cascading-content">
<p>
UG 3.1.3 Placement of facing constructions on the same plot</p>
<p>
UG.3.2.6 Envelope gauge* of facing constructions on the same plot*</p>
</div>
</details>

<p class="lead">
La macro cConsentTac gère le consentement en utilisant la bibliothèque
<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 afficher 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 informative" data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-634172984497961" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-634172984497961">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 informative" data-mce-svg="paris-icon paris-icon-alert-danger" aria-labelledby="paris-icon-alert-danger-paris-title-638005141761831" focusable="false" role="img">
<title id="paris-icon-alert-danger-paris-title-638005141761831">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 decorative" 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-670998085345051" role="group" aria-labelledby="legend-id-670998085345051">
<legend class="visually-hidden" id="legend-id-670998085345051">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" 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" 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" 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" 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" 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" required aria-required="true">
</div>
</div>
</fieldset>
</form>

<form method="post">
<div class="row ">
<div class="col ">
<fieldset class="form-check-group " id="fieldset-form-check-group-723987500719881" role="group" aria-labelledby="legend-form-check-group-723987500719881">
<legend id="legend-form-check-group-723987500719881">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-772512601566971" aria-describedby="help_checkboxHelp1" role="group" aria-labelledby="legend-id-772512601566971">
<label class="form-label">
Schedule
</label>
<p class="form-text " id="help_checkboxHelp1">
Choose a schedule</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">
Swimming
</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-779444758830841" aria-describedby="help_checkboxHelp2" role="group" aria-labelledby="legend-id-779444758830841">
<label class="form-label">
Schedule
</label>
<p class="form-text " id="help_checkboxHelp2">
Choose a schedule</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 decorative" data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>Error in the 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-795309073358581" aria-describedby="help_selectHelp" role="group" aria-labelledby="legend-id-795309073358581">
<label class="form-label">
Which choice?
</label>
<p class="form-text " id="help_selectHelp">
Make your choice</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">A sport with a ball.</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">A combat sport.</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">
Swimming
<p class="selection-subtitle my-sm">A sport in the water.</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">A racket sport.</p>
</label>
</div>
</div>
</fieldset>
</div>
</div>
</form>

<div class="form-check">
<input type="radio" id="gender-894714960525021" name="gender" class="form-check-input" value="male">
<label class="form-label form-check-label" for="gender-894714960525021">
Male
</label>
</div>
<div class="form-check">
<input type="radio" id="gender-894757117788891" name="gender" class="form-check-input" value="female">
<label class="form-label form-check-label" for="gender-894757117788891">
Female
</label>
</div>
<div class="form-check">
<input type="radio" id="gender-894799275052761" name="gender" class="form-check-input" value="other">
<label class="form-label form-check-label" for="gender-894799275052761">
Other
</label>
</div>
<div class="row ">
<div class="col ">
<div class="form-check form-check-inline">
<input type="radio" id="size-894841432316631" name="size" class="form-check-input" value="S">
<label class="form-label form-check-label" for="size-894841432316631">
Small
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="size-894883589580501" name="size" class="form-check-input" value="M">
<label class="form-label form-check-label" for="size-894883589580501">
Medium
</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="size-894925746844371" name="size" class="form-check-input" value="L">
<label class="form-label form-check-label" for="size-894925746844371">
Large
</label>
</div>
</div>
</div>
<div class="row ">
<div class="col ">
<input type="radio" name="plan" class="btn-check form-check" id="plan-894967904108241" autocomplete="off" value="monthly">
<label class="form-label btn btn-outline-primary" for="plan-894967904108241">
Monthly
</label>
<input type="radio" name="plan" class="btn-check form-check" id="plan-895010061372111" autocomplete="off" value="yearly">
<label class="form-label btn btn-outline-primary" for="plan-895010061372111">
Yearly
</label>
</div>
</div>
<div class="form-check btn-selection">
<div class="selection-check">
<input type="radio" id="delivery-895052218635981" name="delivery" class="form-check-input" value="express">
<label class="form-label form-check-label" for="delivery-895052218635981">
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 decorative" 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 decorative" 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="">

<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...">

<form method="post">
<input type="text" class=" form-control" name="firstname" id="firstname" value="" placeholder="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 decorative" 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">
<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">
</div>
<div class="input-group input-group-lg">
<input type="text" class=" form-control" name="search" id="search" value="" placeholder="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 decorative" 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">
<label class="form-label visually-hidden" for="search">
Search
</label>
<input type="text" class=" form-control" name="search" id="search" value="" placeholder="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 decorative" 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-1103912037399171" data-maxoptions="0">
<div class="tags-container mt-s"></div>
<div class="dropdown">
<button class="form-select multi-select " type="button" id='btn-msg-1103912037399171' 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-1113054194663041" autocomplete="off" value="sport">
<label class="form-label btn btn-outline-primary my-0" for="categories-1113054194663041">
Sport
</label>
</li>
<li>
<input type="checkbox" name="categories" class="btn-check" id="categories-1122196351926911" autocomplete="off" value="culture">
<label class="form-label btn btn-outline-primary my-0" for="categories-1122196351926911">
Culture
</label>
</li>
<li>
<input type="checkbox" name="categories" class="btn-check" id="categories-1131338509190781" autocomplete="off" value="education">
<label class="form-label btn btn-outline-primary my-0" for="categories-1131338509190781">
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-1140480666454651" autocomplete="off" value="music">
<label class="form-label btn btn-outline-primary my-0" for="interests-1140480666454651">
Music
</label>
</li>
<li>
<input type="checkbox" name="interests" class="btn-check" id="interests-1149622823718521" autocomplete="off" value="travel">
<label class="form-label btn btn-outline-primary my-0" for="interests-1149622823718521">
Travel
</label>
</li>
<li>
<input type="checkbox" name="interests" class="btn-check" id="interests-1158764980982391" autocomplete="off" value="food">
<label class="form-label btn btn-outline-primary my-0" for="interests-1158764980982391">
Food
</label>
</li>
<li>
<input type="checkbox" name="interests" class="btn-check" id="interests-1167907138246261" autocomplete="off" value="art">
<label class="form-label btn btn-outline-primary my-0" for="interests-1167907138246261">
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 decorative" 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 decorative" 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 decorative" 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 decorative" 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 decorative" 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 decorative" 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 decorative" 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 informative" data-mce-svg="paris-icon paris-icon-alert-warning" aria-labelledby="paris-icon-alert-warning-paris-title-1293618912579141" focusable="false" role="img">
<title id="paris-icon-alert-warning-paris-title-1293618912579141">Warning</title>
<use href="#paris-icon-alert-warning"></use>
</svg></div>
<div class="alert-text ">
<p class="alert-title">
Avertissement</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 bibliothèque autre que le JQuery FileUpload inclus dans le plugin, vous devrez 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 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">Avertissement</strong>
<button type="button" class="ms-auto btn-close" data-bs-dismiss="toast" aria-label="Close">&times;</button>
</div>
<div class="toast-body">
Les téléversements ne sont pas disponibles dans 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">
File drop zone</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">
Upload your files!</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" role="button" tabindex="0">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">
Drop zone + uploaded files list</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" role="button" tabindex="0">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=My certificate.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" data-type="DOCX" data-img="">
<span class="file-item-label">My certificate.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 My certificate.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=Proof.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" data-type="DOCX" data-img="">
<span class="file-item-label">Proof.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 Proof.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 ">Submit</span>
</button>
<button class="btn btn-link-action" type="submit">
<svg class="paris-icon paris-icon-close decorative" 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 ">Cancel</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-07-09">
<span class="input-group-text">
<svg class="paris-icon paris-icon-agenda datepicker_1" data-mce-svg="paris-icon paris-icon-agenda" aria-labelledby="paris-icon-agenda-paris-title-1331114013426231" focusable="false" role="img">
<title id="paris-icon-agenda-paris-title-1331114013426231"></title>
<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>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('datepicker_1');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</script>
</div>
<div class="col-4 ">
<label class="form-label" for="datepicker">
Date picker without icon<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="dd/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>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('datepicker_2');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</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 with separator
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date4" id="datepicker_4" value="">
</div>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('datepicker_4');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
// No datepicker on this field: check the typed value is a real calendar
// date (rejects 31/02/2026), raise the error message in the HTML and
// keep focus in the field while it is not valid (same behaviour as the
// validation patch of initThemeDatePicker.ftl for datepicker fields)
const dayFirst = localeSample.indexOf('31') < localeSample.indexOf('12');
const yearFirst = localeSample.indexOf(String(yr)) === 0;
function isValidDate(str) {
const parts = str.split(sep);
if (parts.length !== partLengths.length) return false;
let d, m, y;
if (yearFirst) { y = parts[0]; m = parts[1]; d = parts[2]; }
else if (dayFirst) { d = parts[0]; m = parts[1]; y = parts[2]; }
else { m = parts[0]; d = parts[1]; y = parts[2]; }
if (!/^[0-9]+$/.test(d + m + y) || y.length !== 4) return false;
const dt = new Date(parseInt(y, 10), parseInt(m, 10) - 1, parseInt(d, 10));
return dt.getFullYear() === parseInt(y, 10)
&& dt.getMonth() === parseInt(m, 10) - 1
&& dt.getDate() === parseInt(d, 10);
}
const msg = (el.getAttribute('data-date-error') || 'Please enter a valid date in the {0} format (example: {1}).')
.replace('{0}', fmtHint).replace('{1}', new Date(yr, 5, 30).toLocaleDateString(lang));
let feedback = null;
function showError() {
el.classList.add('is-invalid');
el.setAttribute('aria-invalid', 'true');
if (!feedback || !feedback.parentNode) {
feedback = document.createElement('p');
feedback.className = 'invalid-feedback';
feedback.id = 'error_datepicker_4';
feedback.innerHTML = '<svg class="paris-icon paris-icon-alert-error main-danger-color" aria-hidden="true" focusable="false" role="img"><use href="#paris-icon-alert-error"></use></svg> ';
feedback.appendChild(document.createTextNode(msg));
const group = el.closest('.input-group') || el;
group.parentNode.insertBefore(feedback, group);
}
el.setAttribute('aria-describedby', feedback.id);
}
function clearError() {
el.classList.remove('is-invalid');
el.removeAttribute('aria-invalid');
el.removeAttribute('aria-describedby');
if (feedback && feedback.parentNode) feedback.parentNode.removeChild(feedback);
feedback = null;
}
let touched = false;
function validate() {
if (el.value === '' || isValidDate(el.value)) { clearError(); return true; }
showError();
return false;
}
el.addEventListener('blur', function() {
touched = true;
if (validate()) return;
setTimeout(function() {
el.focus();
el.setSelectionRange(0, el.value.length);
}, 0);
});
// Re-validate while typing once the field has been touched, so the
// message disappears as soon as the value becomes valid again
el.addEventListener('input', function() { if (touched) validate(); });
// Validate on submit and block the submission if the date is invalid
const form = el.closest('form');
if (form) {
form.addEventListener('submit', function(e) {
touched = true;
if (el.offsetParent !== null && !validate()) {
e.preventDefault();
el.focus();
}
});
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</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 ">
<label class="form-label visually-hidden" for="dtRangeA11yA_range_start">
#i8n{theme.labelDateStart}
</label>
</div>
<div class="col ">
<label class="form-label visually-hidden" for="dtRangeA11yA_range_end">
#i8n{theme.labelDateEnd}
</label>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeA11yA" id="dtRangeA11yA_range_start" value="">
</div>
</div>
<div class="col ">
<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 dtRangeA11yA" data-mce-svg="paris-icon paris-icon-agenda" aria-labelledby="paris-icon-agenda-paris-title-1400277743328801" focusable="false" role="img">
<title id="paris-icon-agenda-paris-title-1400277743328801"></title>
<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>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('dtRangeA11yA_range_start');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</script>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('dtRangeA11yA_range_end');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</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 ">
<label class="form-label visually-hidden" for="dtRangeA11yB_range_start">
#i8n{theme.labelDateStart}
</label>
</div>
<div class="col ">
<label class="form-label visually-hidden" for="dtRangeA11yB_range_end">
#i8n{theme.labelDateEnd}
</label>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeA11yB" id="dtRangeA11yB_range_start" value="">
</div>
</div>
<div class="col ">
<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 dtRangeA11yB" data-mce-svg="paris-icon paris-icon-agenda" aria-labelledby="paris-icon-agenda-paris-title-1402019900592671" focusable="false" role="img">
<title id="paris-icon-agenda-paris-title-1402019900592671"></title>
<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>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('dtRangeA11yB_range_start');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</script>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('dtRangeA11yB_range_end');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</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 ">
<label class="form-label" for="dtRangeLabeled_range_start">
Début
</label>
</div>
<div class="col ">
<label class="form-label" for="dtRangeLabeled_range_end">
Fin
</label>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeLabeled" id="dtRangeLabeled_range_start" value="">
</div>
</div>
<div class="col ">
<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 dtRangeLabeled" data-mce-svg="paris-icon paris-icon-agenda" aria-labelledby="paris-icon-agenda-paris-title-1404762057856541" focusable="false" role="img">
<title id="paris-icon-agenda-paris-title-1404762057856541"></title>
<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>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('dtRangeLabeled_range_start');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</script>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('dtRangeLabeled_range_end');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</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 decorative" 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 ">
<label class="form-label" for="dtRangeLabeled2_range_start">
Début
</label>
</div>
<div class="col ">
<label class="form-label" for="dtRangeLabeled2_range_end">
Fin
</label>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="input-group">
<input type="text" class=" form-control" name="dateRangeLabeled2" id="dtRangeLabeled2_range_start" value="">
</div>
</div>
<div class="col ">
<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 dtRangeLabeled2" data-mce-svg="paris-icon paris-icon-agenda" aria-labelledby="paris-icon-agenda-paris-title-1412246372384281" focusable="false" role="img">
<title id="paris-icon-agenda-paris-title-1412246372384281"></title>
<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>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('dtRangeLabeled2_range_start');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</script>
<script>
(function() {
function initDateTyping() {
const el = document.getElementById('dtRangeLabeled2_range_end');
if (!el || el.type === 'hidden') return;
// Detect separator and format from locale (e.g. "31/12/2026" → sep="/", parts=[2,2,4])
const yr = new Date().getFullYear();
const lang = document.documentElement.lang || navigator.language;
const localeSample = new Date(yr, 11, 31).toLocaleDateString(lang);
const sep = localeSample.replace(/[0-9]/g, '').charAt(0) || '/';
const partLengths = localeSample.split(sep).map(function(p) { return p.length; });
// Localized format hint, e.g. "JJ/MM/AAAA" (fr) / "DD/MM/YYYY" (en)
const fmtLetters = 'DMY';
const fmtHint = localeSample.replace('31', (fmtLetters.charAt(0) || 'J').repeat(2))
.replace('12', (fmtLetters.charAt(1) || 'M').repeat(2))
.replace(String(yr), (fmtLetters.charAt(2) || 'A').repeat(4));
if (el.placeholder === '') {
el.placeholder = fmtHint.toLowerCase();
}
// Format digits, inserting the separator as soon as a part is complete ("01" → "01/")
function formatWithSep(digits) {
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 (chunk.length === partLengths[i] && i < partLengths.length - 1 && di >= digits.length) {
result += sep;
break;
}
}
return result;
}
// Track previous value so the user can delete freely
let prevLen = el.value.length;
el.addEventListener('input', function() {
const curLen = el.value.length;
const isDeleting = curLen < prevLen;
prevLen = curLen;
if (isDeleting) return;
const digits = el.value.replace(/[^0-9]/g, '');
const result = formatWithSep(digits);
if (result !== el.value) {
el.value = result;
prevLen = result.length;
el.setSelectionRange(result.length, result.length);
// Notify listeners (datepicker hidden-field sync, live validation)
el.dispatchEvent(new Event('input', { bubbles: true }));
}
});
el.addEventListener('changeDate', function() { prevLen = el.value.length; });
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initDateTyping);
} else {
initDateTyping();
}
})();
</script>
</div>
</div>
</form>

<form method="post">
<fieldset id="fieldset-error" role="group" aria-labelledby="legend-error">
<legend id="legend-error">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 decorative" data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>An error occurred!</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 decorative" data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>An error occurred!</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 decorative" data-mce-svg="paris-icon paris-icon-alert-error" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-alert-error"></use>
</svg>An error occurred!</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">Meeting time <span class="main-danger-color" tabindex="-1" title="Mandatory">*</span></legend>
<p class="form-text " id="help_meeting">
Please select a meeting time</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">Choose a time slot</legend>
<p class="form-text " id="help_creneau">
Book an appointment for the chosen time slot</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">
Quantity
</label>
<p class="form-text " id="help_seats">
Example information</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="">
</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-none d-sm-block">
<ul class="list-unstyled" >
<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 class="step-current-toolbar d-block d-sm-none">
<ul class="list-unstyled" >
<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>
<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>
</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-none d-sm-block">
<ul class="list-unstyled" >
<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 class="step-current-toolbar d-block d-sm-none">
<ul class="list-unstyled" >
<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">
Step content: With help tooltip</p>
<section class="step step-current " id="current_step">
<div class="step-title">
<div class="container ">
<h2 class="title h3" data-step="2" title="File - current step" aria-current="step" tabindex="0">
<span class="step-number">
2</span>
<span>
File</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-1507553832189421" role="group" aria-labelledby="legend-id-1507553832189421">
<legend id="legend-id-1507553832189421">
<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">
Last name <small class="text-muted">(Family name)</small>
</label>
<p class="form-text " id="help_name">
Enter your last name</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Example: Durand">
</div>
<div class="col ">
<label class="form-label" for="firstname">
First name
</label>
<p class="form-text " id="help_firstname">
Enter your first name</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-1511605989453291">
<h3 class="mt-0 mt-0 group-title" tabindex="-1" >
Information without 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">
Last name <small class="text-muted">(Family name)</small>
</label>
<p class="form-text " id="help_name">
Enter your last name</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Example: Durand">
</div>
<div class="col ">
<label class="form-label" for="firstname">
First name
</label>
<p class="form-text " id="help_firstname">
Enter your first name</p>
<input type="text" class=" form-control" name="firstname" id="firstname" value="">
</div>
</div>
</div>
</div>
<p class="lead">
Step content with at least one iteration</p>
<div class="step-group">
<fieldset class="w-100 flex-fill " id="fieldset-id-1515658146717161" role="group" aria-labelledby="legend-id-1515658146717161">
<legend class="d-flex justify-content-between align-items-center" id="legend-id-1515658146717161">
<span class="h3 group-title">
Information with iteration (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 decorative" 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 decorative" 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">
Last name <small class="text-muted">(Family name)</small>
</label>
<p class="form-text " id="help_name635">
Enter your last name</p>
<input type="text" class=" form-control" name="name635" id="name635" value="" placeholder="Example: Durand">
</div>
<div class="col ">
<label class="form-label" for="firstname-2">
First name
</label>
<p class="form-text " id="help_firstname-2">
Enter your first name</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-none d-sm-block">
<ul class="list-unstyled" >
<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 class="step-current-toolbar d-block d-sm-none">
<ul class="list-unstyled" >
<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 decorative" 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 decorative" 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">
List of links </h3>
<ul class="custom-list list-default" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Paris.fr page dedicated to town planning rules" target="_blank">
<span>Paris.fr page dedicated to town planning rules </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/municipalite" title="View the PLU" target="_blank">
<span>View the PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" class="" title="City of Paris website [New window]" target="_blank" >
<span class="link-label">Discover Paris.fr</span>
</a>
</li>
</ul>
<p>
With class "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="Paris.fr page dedicated to town planning rules" target="_blank">
<span>Paris.fr page dedicated to town planning rules </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://www.paris.fr/municipalite" title="View the PLU" target="_blank">
<span>View the PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" class="" title="City of Paris website [New window]" target="_blank" >
<span class="link-label">Discover Paris.fr</span>
</a>
</li>
</ul>
</div>
</div>
<div class="card ">
<div class="card-body ">
<h3 class="card-title">
List of files </h3>
<ul class="custom-list list-files" >
<li class="custom-list-item ">
<a class="list-info" href="https://paris.fr" title="Town planning rules.pdf" target="_blank" download="Town_planning_rules.pdf">
<span>Town planning rules.pdf </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color decorative" 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 decorative" 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>
With class "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="Town planning rules.pdf" target="_blank" download="Town_planning_rules.pdf">
<span>Town planning rules.pdf </span>
<div class="files-info">
<small class='fw-bold'>80ko</small>
<svg class="paris-icon paris-icon-file-text ms-m main-color decorative" 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 decorative" 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">
List of links</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="All about the theme" target="_blank">
<span>All about the theme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://lutece.paris.fr/" title="All about Lutece" >
<span>All about 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="All about my mother" >
<span>All about my mother </span>
</a>
</li>
<li class="custom-list-item ">
<a class="list-info" href="https://teleservices2.rec.apps.paris.fr/forms" title="All about the theme" target="_blank">
<span>All about the theme </span>
</a>
</li>
<li class="custom-list-item extra hidden">
<a class="list-info" href="https://lutece.paris.fr/" title="All about Lutece" >
<span>All about 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="All about my mother" >
<span>All about my mother </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">
Cliquez 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>

<a id="btn-sidePanel" class="btn btn-primary " onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#sidePanel" role="button" aria-controls="sidePanel" title="Open panel">
Open panel
<span class="visually-hidden">Open panel</span>
</a>
<div class="offcanvas offcanvas-end w-auto" data-lutece-load-content-url="" data-lutece-load-content-target="" data-lutece-redirectForm=true tabindex="-1" id="sidePanel" aria-labelledby="sidePanelLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 mt-0 ms-s" id="sidePanelLabel">Side Panel</h2>
<button type="button" class="btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close decorative" 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="offcanvas-body-sidePanel" class="offcanvas-body text-break px-xl">
<p>
Panel content goes here.</p>
</div>
</div>
<a id="btn-searchPanel" class="btn btn-primary " onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#searchPanel" role="button" aria-controls="searchPanel" title="View search">
View search
<span class="visually-hidden">View search</span>
</a>
<div class="offcanvas offcanvas-end w-half" data-lutece-load-content-url="jsp/site/Portal.jsp?page=search" data-lutece-load-content-target="#main" data-lutece-redirectForm=true tabindex="-1" id="searchPanel" aria-labelledby="searchPanelLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 mt-0 ms-s" id="searchPanelLabel">Search</h2>
<button type="button" class="btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close decorative" 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="offcanvas-body-searchPanel" class="offcanvas-body text-break px-xl">
<div>
Loading...</div>
</div>
</div>
<script type="module">
import LuteceBSOffCanvas from "./themes/shared/modules/bootstrap/luteceBSOffCanvas.js";
new LuteceBSOffCanvas(`searchPanel`);
</script>
<a id="btn-notifications" class="btn btn-outline-primary position-relative" onclick="event.preventDefault();" data-bs-toggle="offcanvas" data-bs-scroll=false data-bs-backdrop="true" href="#notifications" role="button" aria-controls="notifications" style="overflow:inherit" title="Notifications">
<svg class="paris-icon paris-icon-bell decorative" data-mce-svg="paris-icon paris-icon-bell" aria-hidden="true" focusable="false" role="img">
<use href="#paris-icon-bell"></use>
</svg> <span class="ms-xs">
Notifications
<span class="visually-hidden">Notifications</span>
</span>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill shadow border bg-danger" style="transform: translate(-50%, -50%) !important;">3</span>
</a>
<div class="offcanvas offcanvas-end w-auto" data-lutece-load-content-url="" data-lutece-load-content-target="" data-lutece-redirectForm=true tabindex="-1" id="notifications" aria-labelledby="notificationsLabel">
<div class="offcanvas-header border-bottom d-flex justify-content-between align-items-center">
<h2 class="h4 offcanvas-title p-0 mt-0 ms-s" id="notificationsLabel">Your notifications</h2>
<button type="button" class="btn btn-light btn-rounded btn-icon end-0 mx-sm p-0" data-bs-dismiss="offcanvas" aria-label="Fermer">
<svg class="paris-icon paris-icon-close decorative" 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="offcanvas-body-notifications" class="offcanvas-body text-break px-xl">
<p>
You have 3 new notifications.</p>
</div>
</div>