<div class="card gray-light-bg-color p-3">
<div class="card-body">
<div class="accordion" id="accacc1">
<div class="card with-subtitle" >
<h3 class="card-header m-0" data-toggle="collapse" data-target="#collapseAccacc1" role="combobox" aria-expanded="true" aria-controls="collapseAccacc1">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-target="#collapseAccacc1" aria-expanded="true" aria-controls="collapseAccacc1">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc1">Titre de l'accordéon</span>
<span class="card-subtitle w-100">...et son sous-titre</span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc1" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc1" data-parent="#accacc1">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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>
</div>
<div class="accordion" id="accacc2">
<div class="card primary" >
<h3 class="card-header m-0" data-toggle="collapse" data-target="#collapseAccacc2" role="combobox" aria-expanded="true" aria-controls="collapseAccacc2">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-target="#collapseAccacc2" aria-expanded="true" aria-controls="collapseAccacc2">
<span class="d-flex align-items-center flex-1">
<span class="card-title d-block main-info-color" id="headingAccacc2">accordéon avec titleClass et header...</span>
<p class="ml-auto text-danger">Header</p>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc2" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc2" data-parent="#accacc2">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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-toggle="collapse" data-target="#collapseAccacc3" role="combobox" aria-expanded="true" aria-controls="collapseAccacc3">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-target="#collapseAccacc3" aria-expanded="true" aria-controls="collapseAccacc3">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc3">accordéon avec bouton action</span>
<span class="card-subtitle w-100 text-muted">Sous titre</span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion btn-secondary">
<svg class="paris-icon paris-icon-arrow-bottom btn-secondary" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc3" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc3" data-parent="#accacc3">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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">
<div class="card outline" >
<h3 class="card-header m-0" data-toggle="collapse" data-target="#collapseAccacc31" role="combobox" aria-expanded="true" aria-controls="collapseAccacc31">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-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" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</span>
<span id="headingAccacc31">accordéon avec outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc31" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc31" data-parent="#accacc31">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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-toggle="collapse" data-target="#collapseAccaccCollapse" role="combobox" aria-expanded="true" aria-controls="collapseAccaccCollapse">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-target="#collapseAccaccCollapse" aria-expanded="true" aria-controls="collapseAccaccCollapse">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccaccCollapse">accordéon collapse</span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccaccCollapse" class="m-0 collapse show" role="region" aria-labelledby="headingAccaccCollapse" data-parent="#accaccCollapse">
<div class="card-body">
Contenu de l'accordéon type "Déplié"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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">
<div class="card alert alert-outline alert-primary" >
<h3 class="card-header m-0 collapsed" data-toggle="collapse" data-target="#collapseAccacc32" role="combobox" aria-expanded="false" aria-controls="collapseAccacc32">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-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" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</span>
<span id="headingAccacc32">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc32" class="m-0 collapse " role="region" aria-labelledby="headingAccacc32" data-parent="#accacc32">
<div class="card-body">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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">
<div class="card alert alert-outline alert-warning" >
<h3 class="card-header m-0" data-toggle="collapse" data-target="#collapseAccacc33" role="combobox" aria-expanded="true" aria-controls="collapseAccacc33">
<button class="btn btn-link btn-block btn-header-accordion main-warning-color-text" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-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" focusable="false" >
<title>Attention</title>
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
</span>
<span id="headingAccacc33">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block main-warning-color-text">Voir le détail</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-warning-color-text" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc33" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc33" data-parent="#accacc33">
<div class="card-body" style="border-color:var(--main-warning-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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">
<div class="card alert alert-outline alert-success" >
<h3 class="card-header m-0" data-toggle="collapse" data-target="#collapseAccacc34" role="combobox" aria-expanded="true" aria-controls="collapseAccacc34">
<button class="btn btn-link btn-block btn-header-accordion main-success-color-text" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-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" focusable="false" >
<title></title>
<use xlink:href="#paris-icon-alert-success"></use>
</svg>
</span>
<span id="headingAccacc34">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block main-success-color-text">Voir le détail</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-success-color-text" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc34" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc34" data-parent="#accacc34">
<div class="card-body" style="border-color:var(--main-success-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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">
<div class="card alert alert-outline alert-danger" >
<h3 class="card-header m-0" data-toggle="collapse" data-target="#collapseAccacc35" role="combobox" aria-expanded="true" aria-controls="collapseAccacc35">
<button class="btn btn-link btn-block btn-header-accordion main-danger-color-text" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-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" focusable="false" >
<title></title>
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</span>
<span id="headingAccacc35">accordéon avec alert primary outline</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block main-danger-color-text">Voir le détail</span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom main-danger-color-text" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc35" class="m-0 collapse show" role="region" aria-labelledby="headingAccacc35" data-parent="#accacc35">
<div class="card-body" style="border-color:var(--main-danger-color-text)">
Contenu de l'accordéon type "Info"
</div>
</div>
<div class="card-footer d-block d-sm-none text-center bg-transparent">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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-toggle="collapse" data-target="#collapseAccacc6" role="combobox" aria-expanded="false" aria-controls="collapseAccacc6">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-target="#collapseAccacc6" aria-expanded="false" aria-controls="collapseAccacc6">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccacc6">Exemple avec bordure</span>
<span class="card-subtitle w-100">...et son sous-titre</span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccacc6" class="m-0 collapse " role="region" aria-labelledby="headingAccacc6" data-parent="#accacc6">
<div class="card-body">
Contenu de l'accordéon
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-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-icon">
<svg class="paris-icon paris-icon-alert-info" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Titre de l'alerte</p>
</div>
</div>
<div class="alert alert-outline alert-danger" role="alert">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message erreur</p>
</div>
</div>
<div class="alert alert-outline alert-danger" role="alert">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message d'erreur</p>
Contenu de l'erreur</div>
</div>
<div class="alert alert-outline alert-danger alert-dismissible fade show" role="alert">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message d'erreur</p>
Message d'erreur et bouton de fermeture</div>
<div class="alert-dismiss">
<button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
<svg class="paris-icon paris-icon-alert-close" id="Fermer" focusable="false" >
<use xlink:href="#paris-icon-alert-close"></use>
</svg>
</button>
</div>
</div>
<div class="alert alert-outline alert-warning" role="alert">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message attention...</p>
</div>
</div>
<div class="alert alert-outline alert-warning alert-dismissible fade show" role="alert">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message attention...</p>
Contenu du message "warning"</div>
<div class="alert-dismiss">
<button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
<svg class="paris-icon paris-icon-alert-close" id="Fermer" focusable="false" >
<use xlink:href="#paris-icon-alert-close"></use>
</svg>
</button>
</div>
</div>
<div class="alert alert-outline alert-success" role="status">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-check" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-check"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message validation...</p>
Confirmation...</div>
</div>
<div class="alert alert-outline alert-success alert-dismissible fade show" role="status">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-check" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-check"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Message validation...</p>
Confirmation...</div>
<div class="alert-dismiss">
<button type="button" class="close" data-dismiss="alert" aria-label="Fermer">
<svg class="paris-icon paris-icon-alert-close" id="Fermer" focusable="false" >
<use xlink:href="#paris-icon-alert-close"></use>
</svg>
</button>
</div>
</div>

<div class="badge ">
<p class="badge-label">Badge example</p>
</div>
<div class="badge badge-secondary">
<p class="badge-label">Badge example</p>
</div>

<p>
<button class="btn btn-primary m-1" type="submit">
<span class="btn-label ">btn-primary</span>
</button>
<button class="btn btn-primary m-1" type="submit" disabled>
<span class="btn-label ">btn-primary disabled</span>
</button>
<button class="btn btn-secondary m-1" type="submit">
<span class="btn-label ">btn-secondary</span>
</button>
<button class="btn btn-secondary m-1" type="submit" disabled>
<span class="btn-label ">btn-secondary disabled</span>
</button>
<button class="btn btn-tertiary m-1" type="submit">
<span class="btn-label ">btn-tertiary</span>
</button>
<button class="btn btn-tertiary m-1" type="submit" disabled>
<span class="btn-label ">btn-tertiary disabled</span>
</button>
<button class="btn btn-danger m-1" type="submit">
<span class="btn-label ">btn-danger</span>
</button>
<button class="btn btn-danger m-1" type="submit" disabled>
<span class="btn-label ">btn-danger disabled</span>
</button>
</p>
<p>
<button class="btn btn-expand m-1" type="submit">
<span class="btn-label ">btn-expand</span>
</button>
<button class="btn btn-expand m-1" type="submit" disabled>
<span class="btn-label ">btn-expand disabled</span>
</button>
</p>
<p>
<button class="btn btn-primary m-1 btn-mini" type="submit">
<span class="btn-label ">btn-primary</span>
</button>
<button class="btn btn-primary m-1 btn-mini" type="submit" disabled>
<span class="btn-label ">btn-primary disabled</span>
</button>
<button class="btn btn-secondary m-1 btn-mini" type="submit">
<span class="btn-label ">btn-secondary</span>
</button>
<button class="btn btn-secondary m-1 btn-mini" type="submit" disabled>
<span class="btn-label ">btn-secondary disabled</span>
</button>
<button class="btn btn-tertiary m-1 btn-mini" type="submit">
<span class="btn-label ">btn-tertiary</span>
</button>
<button class="btn btn-tertiary m-1 btn-mini" type="submit" disabled>
<span class="btn-label ">btn-tertiary disabled</span>
</button>
<button class="btn btn-danger m-1 btn-mini" type="submit">
<span class="btn-label ">btn-danger</span>
</button>
<button class="btn btn-danger m-1 btn-mini" type="submit" disabled>
<span class="btn-label ">btn-danger disabled</span>
</button>
</p>

<p>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<button class="btn btn-link-action btn-img" type="submit">
<span>
Actualités - Flux RSS
</span>
<!-- Warning : wrong or deprecated argument(s) : title, ... -->
<img src="images/feed.png" alt="" class="after">
</button>
</p>

<p>
<div class="btn-group" role="group" aria-label="Menu Accueil">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">C</span>
</button>
</div>
</p>
<p>
<div class="btn-group btn-group-vertical" role="group" aria-label="Menu Accueil">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Réactif</span>
</button>
<button class="btn btn-primary active" type="submit">
<span class="btn-label ">Actif</span>
</button>
</div>
</p>

<div class="btn-toolbar d-flex justify-content-around" role="toolbar" aria-label="Menu Accueil">
<div class="btn-group" role="group" aria-label="Menu Accueil Droit">
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">A</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">B</span>
</button>
<button class="btn btn-secondary" type="submit">
<span class="btn-label ">C</span>
</button>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Droit">
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">D</span>
</button>
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">E</span>
</button>
<button class="btn btn-secondary" type="submit" disabled>
<span class="btn-label ">F</span>
</button>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Gauche">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Réactif</span>
</button>
<button class="btn btn-primary active" type="submit">
<span class="btn-label ">Actif</span>
</button>
</div>
<div class="btn-group" role="group" aria-label="Menu Accueil Gauche">
<button class="btn btn-primary" type="submit" disabled>
<span class="btn-label ">Réactif</span>
</button>
<button class="btn btn-primary active" type="submit" disabled>
<span class="btn-label ">Actif</span>
</button>
</div>
</div>

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

<div id="manege" class="carousel slide carousel-themed show-neighbors" data-ride="carousel" aria-roledescription="carousel" aria-label="Carousel">
<ol class="carousel-indicators pagination">
<li class="page-item active" data-target="#manege" data-slide-to="0" aria-label="Slide 0" aria-selected="false" aria-controls="carousel-item-0"><span class="page-link">1</span></li>
<li class="page-item" data-target="#manege" data-slide-to="1" aria-label="Slide 1" aria-selected="false" aria-controls="carousel-item-1"><span class="page-link">2</span></li>
<li class="page-item" data-target="#manege" data-slide-to="2" aria-label="Slide 2" aria-selected="false" aria-controls="carousel-item-2"><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="https://picsum.photos/id/10/2500/1667" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Le hasard</h3>
<p></p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="https://picsum.photos/id/10/2500/1667" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Fait bien</h3>
<p>Mais pas que...</p>
</div>
</div>
</div>
<div class="carousel-item" id="manege-item-1" role="group" aria-roledescription="slide" aria-label="1 of 1">
<div class="item__third">
<img src="https://picsum.photos/id/10/2500/1667" class="d-block w-100" alt="">
<div class="carousel-caption">
<h3>
Les choses</h3>
<p></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" href="#manege" data-slide="prev">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-left" focusable="false" >
<use xlink:href="#paris-icon-arrow-left"></use>
</svg>
<span class="sr-only"></span>
</span>
</button>
<button class="carousel-control-next" href="#manege" data-slide="next">
<span class="carousel-bg-control">
<svg class="paris-icon paris-icon-arrow-right" focusable="false" >
<use xlink:href="#paris-icon-arrow-right"></use>
</svg>
<span class="sr-only"></span>
</span>
</button>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-carousel.js"></script>

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

<h4 class="mt-l">
Vertical</h4>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
<br>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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>
<br>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title example</h3>
</div>
</div>
<br>
<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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
<br>
<h4 class="mt-l">
Vertical Secondary</h4>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
<br>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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>
<br>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title example</h3>
</div>
</div>
<br>
<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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
<br>
<h4 class="mt-l">
Horizontal</h4>
<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" class="card-img-top" alt="">
</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-flex justify-content-between align-items-end align-items-end">
<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>
<button class="btn btn-action ml-3 text-right" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<br>
<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" class="card-img-top" alt="">
</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-flex justify-content-between align-items-end align-items-end">
<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>
</div>
<br>
<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-flex justify-content-between align-items-end align-items-end">
<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>
<button class="btn btn-action ml-3 text-right" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<h4 class="mt-l">
Horizontal Secondary</h4>
<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" class="card-img-top" alt="">
</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-flex justify-content-between align-items-end align-items-end">
<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>
<button class="btn btn-action ml-3 text-right" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<br>
<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" class="card-img-top" alt="">
</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-flex justify-content-between align-items-end align-items-end">
<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>
</div>
<br>
<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-flex justify-content-between align-items-end align-items-end">
<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>
<button class="btn btn-action ml-3 text-right" type="submit">
<span class="btn-label ">Text example</span>
</button>
</div>
</div>
</div>
</div>
</div>
<h4 class="mt-l">
Cartes depliantes</h4>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title example</h3>
<details id='cascadSolo1' class="cascading " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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-3">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
<br>
<div class="card secondary">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title example</h3>
<details id='cascadSolo9' class="cascading " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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 " >
<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-3">
<button class="btn btn-expand" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>

<div style="height: 530px; position: relative;">
<div class="card card-floating d-block" id="float-card" >
<div class="card-body">
<div class='card-title-container'>
<h3 class="card-title">
Carte Flotante</h3>
<button type="button" class="close" aria-label="Fermer params='data-target="#float-card" data-dismiss="alert"">
<svg class="paris-icon paris-icon-close" focusable="false" >
<title>Fermer</title>
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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 style="height: 530px; position: relative">
<div class="card card-floating d-block secondary" id="float2-card" >
<div class="card-body">
<div class='card-title-container'>
<h3 class="card-title">
Carte Flotante Secondary</h3>
<button type="button" class="close" aria-label="Fermer params='data-target="#float2-card" data-dismiss="alert"">
<svg class="paris-icon paris-icon-close" focusable="false" >
<title>Fermer</title>
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</div>
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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="d-flex justify-content-between align-items-center" 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 class="card-group ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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 class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title example</h3>
</div>
</div>
<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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</div>
<br>
<div class="card-deck ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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 class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title example</h3>
</div>
</div>
<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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</div>
<br>
<div class="card-columns ">
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
<div class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</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 class="card ">
<figure class="card-figure ">
<img src="images/paul-dufour-5XndD3FhH-w-unsplash.png" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title example</h3>
</div>
</div>
<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-right">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Text example</span>
</button>
</p>
</div>
</div>
</div>

<link rel="stylesheet" href="themes/skin/parisfr/js/vendor/tarteaucitron/css/theme-parisfr-tac.min.css" >
<script src="themes/skin/parisfr/js/vendor/tarteaucitron/tarteaucitron.min.js"></script>
<!-- Service Mon Paris -->
<script>
tarteaucitron.services.monparis={
"key": "monparis",
"type": "api",
"name": "Mon Paris",
"uri": "https://moncompte.paris.fr",
"readmoreLink": "https://www.paris.fr/pages/cookies-234",
"needconsent": false,
"useExternalCss" : true,
"mandatory": true,
"cookies": ['mcpAuth','JSESSIONID','AUTH_SESSION_ID','KEYCLOAK_IDENTITY','KEYCLOAK_SESSION'],
"js": function () {
"use strict";
// When user allow cookie
},
"fallback": function () {
"use strict";
// when use deny cookie
}
};
tarteaucitron.init({
"bodyPosition": "top",
"privacyUrl": "//www.paris.fr/pages/mentions-legales-235#confidentialite-et-protection-des-donnees", /* Privacy policy url */
"hashtag": "#cookiepolicyparisfr", /* Open the panel with this hashtag */
"cookieName": "cookieparisfr", /* Cookie name */
"orientation": "bottom", /* Banner position (top - bottom) */
"showAlertSmall": false, /* Show the small banner on bottom right */
"cookieslist": true, /* Show the cookie list */
"adblocker": true, /* Show a Warning if an adblocker is detected */
"AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */
"DenyAllCta" : false, /* Show the Deny all button when highPrivacy on */
"highPrivacy": true, /* Disable auto consent */
"handleBrowserDNTRequest": true, /* If Do Not Track == 1, disallow all */
"removeCredit": false, /* Remove credit link */
"moreInfoLink": true, /* Show more info link */
"useExternalCss": true, /* If false, the tarteaucitron.css file will be loaded */
"readmoreLink": "https://www.paris.fr/pages/cookies-234", /* Change the default readmore link */
"mandatory": true, /* Show a message about mandatory cookies */
});
(tarteaucitron.job = tarteaucitron.job || []).push('monparis');
(tarteaucitron.job = tarteaucitron.job || []).push('matomohightrack');
</script>
<p class="lead">
La macro @cConsentTac permet la gestion du consentement en utilisant la librairie
<a href="https://tarteaucitron.io/fr/install/" target="_blank" >
<span class="link-label">TarteAuCitron</span>
</a>
.</p>
<p class="lead">
Vous pouvez cliquer sur le bouton "Cookie" situé en bas à droite de cet écran pour visualiser la fenêtre de gestion des cookies.</p>

<div class="stepper">
<ol class="stepper-list " >
<li class="done">
<div class="idx" data-idx="1" aria-hidden="true">
<svg class="paris-icon paris-icon-check main-color" focusable="false" >
<title>Etape Validée</title>
<use xlink:href="#paris-icon-check"></use>
</svg>
</div>
<p id="step-title-1" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="in-progress"aria-current="step">
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<p id="step-title-2" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line start"></div>
<div class="bs-stepper-line end"></div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<p id="step-title-3" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="4" aria-hidden="true">
<span>4</span>
</div>
<p id="step-title-4" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<p id="step-title-5" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
<div class="stepper">
<ol class="stepper-list " >
<li class="done">
<div class="idx" data-idx="1" aria-hidden="true">
<svg class="paris-icon paris-icon-check main-color" focusable="false" >
<title>Etape Validée</title>
<use xlink:href="#paris-icon-check"></use>
</svg>
</div>
<p id="step-title-1" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="started">
<div class="idx" data-idx="2" aria-hidden="true">
<span>2</span>
</div>
<p id="step-title-2" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
<li>
<div class="idx" data-idx="3" aria-hidden="true">
<span>3</span>
</div>
<p id="step-title-3" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="4" aria-hidden="true">
<span>4</span>
</div>
<p id="step-title-4" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<div class="idx" data-idx="5" aria-hidden="true">
<span>5</span>
</div>
<p id="step-title-5" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>
<div class="stepper">
<ol class="stepper-list " >
<li class="done">
<figure class="p-3" data-idx="1" aria-hidden="true">
<img src="images/fa-battery-0.png" class="img-fluid" title="Text example" alt="Text example" aria-hidden="true">
</figure>
<p id="step-title-1" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line done"></div>
</li>
<li class="started">
<figure class="p-3" data-idx="2" aria-hidden="true">
<img src="images/fa-battery-1.png" class="img-fluid" title="Text example" alt="Text example" aria-hidden="true">
</figure>
<p id="step-title-2" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line started"></div>
</li>
<li>
<figure class="p-3" data-idx="3" aria-hidden="true">
<img src="images/fa-battery-2.png" class="img-fluid" title="Text example" alt="Text example" aria-hidden="true">
</figure>
<p id="step-title-3" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<figure class="p-3" data-idx="4" aria-hidden="true">
<img src="images/fa-battery-3.png" class="img-fluid" title="Text example" alt="Text example" aria-hidden="true">
</figure>
<p id="step-title-4" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
<li>
<figure class="p-3" data-idx="5" aria-hidden="true">
<img src="images/fa-battery-4.png" class="img-fluid" title="Text example" alt="Text example" aria-hidden="true">
</figure>
<p id="step-title-5" class="mt-2">Text example</p>
</li>
<li class="bs-stepper-container">
<div class="bs-stepper-line "></div>
</li>
</ol>
</div>

<div class="container">
<div class="row ">
<div class="col ">
<div class="c-info-step-wrapper stepper-horizontal c-info-step-default" >
<ol class="c-info-step-icons d-none d-md-flex">
<li class="c-info-step-icons__item">
<figure >
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape Vide" alt="Etape Vide" aria-hidden="true">
</figure>
</li>
<li class="c-info-step-icons__item">
<figure >
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape 50% " alt="Etape 50% " aria-hidden="true">
</figure>
</li>
<li class="c-info-step-icons__item">
<figure >
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape 100%" alt="Etape 100%" aria-hidden="true">
</figure>
</li>
</ol>
<ol class="c-info-step" >
<li class="c-info-step__item">
<div class="c-info-step__icon d-md-none">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape Vide" alt="Etape Vide" aria-hidden="true">
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape Vide</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon d-md-none">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape 50% " alt="Etape 50% " aria-hidden="true">
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 50% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon d-md-none">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape 100%" alt="Etape 100%" aria-hidden="true">
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 100%</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
</ol>
</div>
<script>
$(window).resize(function(){
const width = $(window).width();
if( width <= 767 ){
$('.c-info-step-default').removeClass('stepper-horizontal').addClass('stepper-vertical');
}
else{
$('.c-info-step-default').removeClass('stepper-vertical').addClass('stepper-horizontal');
}
}).resize();
</script>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="c-info-step-wrapper stepper-horizontal c-info-step-default" >
<ol class="c-info-step" >
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape Vide</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 50% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 100%</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
</ol>
</div>
<script>
$(window).resize(function(){
const width = $(window).width();
if( width <= 767 ){
$('.c-info-step-default').removeClass('stepper-horizontal').addClass('stepper-vertical');
}
else{
$('.c-info-step-default').removeClass('stepper-vertical').addClass('stepper-horizontal');
}
}).resize();
</script>
</div>
</div>
<div class="row ">
<div class="col ">
<div class="c-info-step-wrapper stepper-vertical" >
<ol class="c-info-step" >
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape Vide" alt="Etape Vide" aria-hidden="true">
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape Vide</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape 25% " alt="Etape 25% " aria-hidden="true">
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 25% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape 50% " alt="Etape 50% " aria-hidden="true">
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 50% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape 75% " alt="Etape 75% " aria-hidden="true">
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 75% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__icon">
<figure class="mb-0">
<img src="images/icon-placeholder.svg" class="img-fluid" title="Etape 100%" alt="Etape 100%" aria-hidden="true">
</figure>
</div>
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 100%</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
</ol>
</div>
</div>
<div class="col ">
<div class="c-info-step-wrapper stepper-vertical" >
<ol class="c-info-step" >
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape Vide</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 25% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 50% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 75% </h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
<li class="c-info-step__item">
<div class="c-info-step__content">
<h3 class="c-info-step__title">Etape 100%</h3>
<p class="c-info-step__desc mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>

<form method="post">
<p>
<a href="jsp/site/Portal.jsp?page_id=8" >
<span class="link-label">Visualiser un formulaire complet</span>
</a>
</p>
</form>

<div class="form-row">
<div class="col ">
<p>
Une ligne de Formulaire... </p>
</div>
</div>

<form method="post">
<div class="form-row">
<div class="col ">
<div class="form-group ">
<label class="" for="reduc">
Code de réduction
</label>
<input type="text" class=" form-control" name="reduc" id="reduc" value="" placeholder="Exemple: A256">
<p class="form-text " id="help_reduc">
Saisir un code de réduction</p>
</div>
</div>
</div>
<fieldset id="fieldset-717" role="group" aria-labelledby="legend-717">
<legend id="legend-717" >Bloc Adresse</legend>
<div class="form-row">
<div class="col-12 col-sm-6 ">
<div class="form-group ">
<label class="" for="firstName">
Prénom &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="firstName" id="firstName" value="Martine" placeholder="Entrez le prénom">
</div>
</div>
<div class="col-12 col-sm-6 ">
<div class="form-group ">
<label class="" for="lastName126">
Nom &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="lastName126" id="lastName126" value="DUPONTEL" placeholder="Entrez le nom">
</div>
</div>
</div>
<div class="form-row">
<div class="col-12 ">
<div class="form-group ">
<label class="" for="adresseVoie">
Numéro et libellé de la voie &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<p class="form-text " id="help_reduc">
Commencez à saisir votre adresse pour sélectionner parmi les propositions</p>
<input type="text" class=" form-control" name="adresseVoie" id="adresseVoie" value="65 RUE PIERRE SEMARD" placeholder="Entrez le numéro et libellé de la voie">
</div>
</div>
</div>
<div class="form-row">
<div class="col-12 ">
<div class="form-group ">
<label class="" for="adresseComplement">
Complément d’adresse
</label>
<input type="text" class=" form-control" name="adresseComplement" id="adresseComplement" value="" placeholder="Ex: ENTREE B RESIDENCE LES IRIS">
</div>
</div>
</div>
<div class="form-row">
<div class="col-12 ">
<div class="form-group ">
<label class="" for="adresseBP">
Boîte postale ou lieu dit
</label>
<input type="text" class=" form-control" name="adresseBP" id="adresseBP" value="BP 75" placeholder="Entrez la boîte postale ou lieu dit">
</div>
</div>
</div>
<div class="form-row">
<div class="col-2 ">
<div class="form-group ">
<label class="" for="adresseCode">
Code postal &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="adresseCode" id="adresseCode" value="75012" placeholder="Exemple: 75020">
</div>
</div>
<div class="col-10 ">
<div class="form-group ">
<label class="" for="adresseVille">
Commune &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="adresseVille" id="adresseVille" value="Paris" placeholder="Exemple: Paris">
</div>
</div>
</div>
</fieldset>
</form>

<form method="post">
<fieldset id="fieldset-fs1" role="group" aria-labelledby="legend-fs1">
<legend id="legend-fs1" >Etat-civil</legend>
<div class="form-row">
<div class="col-12 col-sm-6 ">
<div class="form-group ">
<label class="" for="firstNameF1">
Prénom &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF1" id="firstNameF1" value="Martine" placeholder="Entrez le prénom">
</div>
</div>
<div class="col-12 col-sm-6 ">
<div class="form-group ">
<label class="" for="lastNameF1">
Nom &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="lastNameF1" id="lastNameF1" value="DUPONTEL" placeholder="Entrez le nom">
</div>
</div>
</div>
</fieldset>
<fieldset class="mt-l" id="fieldset-fs2" role="group" aria-labelledby="legend-fs2">
<legend class=" sr-only" id="legend-fs2" >Etat-civil 2</legend>
<div class="form-row">
<div class="col-12 col-sm-6 ">
<div class="form-group ">
<label class="" for="firstNameF2">
Prénom &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF2" id="firstNameF2" value="Martine" placeholder="Entrez le prénom">
</div>
</div>
<div class="col-12 col-sm-6 ">
<div class="form-group ">
<label class="" for="lastNameF2">
Nom &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="lastNameF2" id="lastNameF2" value="DUPONTEL" placeholder="Entrez le nom">
</div>
</div>
</div>
</fieldset>
<fieldset class="mt-l" id="fieldset-fs3" role="group" aria-labelledby="legend-fs3">
<legend class="is-invalide" id="legend-fs3" >Etat-civil 3</legend>
<div class="form-row">
<div class="col-12 col-sm-6 ">
<div class="form-group ">
<label class="" for="firstNameF3">
Prénom &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="firstNameF3" id="firstNameF3" value="Martine" placeholder="Entrez le prénom">
</div>
</div>
<div class="col-12 col-sm-6 ">
<div class="form-group ">
<label class="" for="lastName">
Nom &nbsp;<span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span>
</label>
<input type="text" class=" form-control" name="lastName" id="lastName" value="DUPONTEL" placeholder="Entrez le nom">
</div>
</div>
</div>
</fieldset>
</form>

<form method="post">
<div class="form-row">
<div class="col ">
<label class="" for="namei">
Nom
</label>
<p class="form-text " id="help_namei">
Saisir mon nom</p>
<input type="text" class=" form-control" name="namei" id="namei" value="Dupont" aria-describedby="help_namei">
</div>
</div>
<div class="form-row">
<div class="col ">
<label class="" for="surnamei">
Prénom
</label>
<p class="form-text " id="help_surnamei">
Saisir mon prénom</p>
<input type="text" class=" form-control" name="surnamei" id="surnamei" value="" placeholder="Exemple: Jean Yves" aria-describedby="help_surnamei">
</div>
</div>
<div class="form-row">
<div class="col-3 ">
<label class="" for="nbd">
Nombre enfants
</label>
<input type="number" class=" form-control" name="nbd" id="nbd" value="0">
</div>
</div>
<div class="form-row">
<div class="col ">
<label class="" for="info" data-info="information">
Informations
</label>
<p class="form-text " id="help_info">
Saisir une information</p>
<input type="text" class=" form-control" name="info" id="info" value="" placeholder="Exemple: Choisir une place" aria-describedby="help_info">
</div>
</div>
<div class="form-row">
<div class="col ">
<label class="" for="numeroTel">
Numéro de téléphone
</label>
<p class="form-text " id="help_numeroTel">
Information example</p>
<input type="tel" class=" form-control fr-number" name="numeroTel" id="numeroTel" value="" placeholder="Ex : 06 38 49 40 02" aria-describedby="help_numeroTel">
<script>
$(document).ready(function(){
$('.fr-number').blur(function(){
var num = $(this).val();
var numFormatte = num
.replace(/^0(\d)(\s?)(\d{2})(\s?)(\d{2})(\s?)(\d{2})(\s?)(\d{2})$/, '+33 $1 $3 $5 $7 $9')
.replace(/^\+33(\d{9})$/, function(match, p1) {
return '+33 ' + p1.replace(/(\d)(\d{2})(\d{2})(\d{2})(\d{2})/, '$1 $2 $3 $4 $5');
});
$(this).val(numFormatte);
});
});
</script>
</div>
</div>
<div class="form-row">
<div class="col-4 ">
<label class="" for="datepicker_0">
Date avec date picker
</label>
<div class="input-group">
<input type="text" class=" form-control" name="name3" id="datepicker_0" value="2024-12-13">
<div class="input-group-append">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda" id="datepicker_0" focusable="false" >
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
let showFormat=getDatePickerDateFormat( navigator.language );
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_0 = document.querySelector('#datepicker_0')
const dtOptionsdatepicker_0 = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdatepicker_0 = new themeParisFrDatepicker( elemdatepicker_0, dtOptionsdatepicker_0 );
});
</script>
</div>
</div>
</form>

<div class="form-row">
<div class="col ">
<label class="" for="pass">
Mot de Passe
</label>
<input type="password" class=" form-control" name="pass" id="pass" value="">
</div>
</div>

<div class="form-row">
<div class="col ">
<p class="form-text " id="help_field">
Aide</p>
<input type="text" class=" form-control" name="name2" id="name2" value="" placeholder="Exemple: Jean Yves">
</div>
</div>

<div class="form-row">
<div class="col ">
<label class="" for="formError">
Prénom
</label>
<p class="invalid-feedback" id="error_field" role="alert">
<svg class="paris-icon paris-icon-alert-error main-danger-color" focusable="false" >
<use xlink:href="#paris-icon-alert-error"></use>
</svg>
Erreur</p>
<input type="text" class=" form-control is-invalide" name="name4" id="formError" value="" placeholder="Exemple: Jean Yves">
</div>
</div>

<div class="form-row">
<div class="col ">
<label class="" for="quantity">
Quantité
</label>
<p class="form-text " id="help_quantity">
Information exemple</p>
<div class="quantity-picker d-flex ">
<div class="input-group w-auto">
<div class="input-group-append">
<button class="btn btn-secondary quantity-btn decrement-quantity" type="submit"aria-label='Retirer une unité' data-direction='-1' disabled>
<span class="btn-label ">&#8722;</span>
</button>
</div>
<input type="number" class=" form-control quantity-input" name="quantity" id="quantity" value="0" data-min='0' data-max='10'>
<div class="input-group-append">
<button class="btn btn-secondary quantity-btn increment-quantity" type="submit"aria-label='Ajouter une unité' data-direction='1'>
<span class="btn-label ">&#43;</span>
</button>
</div>
</div>
</div>
<script>
$(document).on("click", "button", function(ev) {
var parentDiv = $(this).closest('.quantity-picker');
var $input = parentDiv.find('input[name="quantity"]');
var currentQty = parseInt($input.val());
var qtyDirection = $(this).data("direction");
var newQty = currentQty + qtyDirection;
var minQty = parseInt($input.data("min"));
var maxQty = parseInt($input.data("max"));
newQty = Math.max(minQty, Math.min(maxQty, newQty));
parentDiv.find(".decrement-quantity").prop("disabled", newQty === minQty);
parentDiv.find(".increment-quantity").prop("disabled", newQty === maxQty);
$input.val(newQty);
});
$(document).on("blur", 'input[name="quantity"]', function(ev) {
var $input = $(this);
var parentDiv = $input.closest('.quantity-picker');
var minQty = parseInt($input.data("min"));
if ($input.val().trim() === "") {
$input.val(minQty);
parentDiv.find(".decrement-quantity").prop("disabled", true);
}
});
</script>
</div>
</div>

<form method="post">
<div class="form-row">
<div class="col 2">
<label class="" for="tarif">
Tarif
</label>
<div class="input-group">
<input type="text" class=" form-control" name="tarif" id="tarif" value="15">
<div class="input-group-append">
<span class="input-group-text">
&euro;</span>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col 8">
<label class="" for="pass2">
Mot de passe
</label>
<div class="input-group">
<input type="password" class=" form-control" name="pass2" id="pass2" value="Ajoho56">
<div class="input-group-append toggle-password">
<div class="input-group-text">
<svg class="paris-icon paris-icon-eye" id="Mot de Passe" focusable="false" >
<use xlink:href="#paris-icon-eye"></use>
</svg>
</div>
</div>
</div>
<p class="form-text " id="help_pass">
<span class="charlength">
<svg class="paris-icon paris-icon-check" focusable="false" >
<use xlink:href="#paris-icon-check"></use>
</svg>
8 caractères</span>
<span class="uppercase">
<svg class="paris-icon paris-icon-check" focusable="false" >
<use xlink:href="#paris-icon-check"></use>
</svg>
une majuscule </span>
<span class="digit">
<svg class="paris-icon paris-icon-check" focusable="false" >
<use xlink:href="#paris-icon-check"></use>
</svg>
un chiffre</span>
</p>
</div>
</div>
<div class="form-row">
<div class="col 8">
<label class="" for="search">
Recherche
</label>
<div class="input-group">
<input type="text" class=" form-control" name="search" id="search" value="" placeholder="Rechercher une adresse">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Rechercher</span>
</button>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col 8">
<label class="" for="exemple">
Label exemple
</label>
<p class="form-text " id="help_field">
Information exemple</p>
<div class="input-group">
<input type="text" class=" form-control" name="exemple" id="exemple" value="" placeholder="Texte exemple">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">
<span class="btn-label ">Texte exemple</span>
</button>
</div>
</div>
</div>
</div>
</form>

<div class="form-row">
<div class="col-3 ">
<label class="" for="datepicker">
Date picker
</label>
<label class="" for="datepicker_1">
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date1" id="datepicker_1" value="2024-12-13">
<div class="input-group-append">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda" id="datepicker_1" focusable="false" >
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
let showFormat=getDatePickerDateFormat( navigator.language );
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 themeParisFrDatepicker( elemdatepicker_1, dtOptionsdatepicker_1 );
});
</script>
</div>
<div class="col-4 ">
<label class="" for="datepicker">
Date picker sans icone
</label>
<label class="" for="datepicker_2">
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date2" id="datepicker_2" value="">
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
let showFormat=getDatePickerDateFormat( navigator.language );
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 themeParisFrDatepicker( elemdatepicker_2, dtOptionsdatepicker_2 );
});
</script>
</div>
<div class="col-3 ">
<label class="" for="datepicker">
Date picker HTML
</label>
<label class="" for="datepicker_3">
</label>
<div class="input-group">
<input type="date" class=" form-control" name="date3" id="datepicker_3" value="">
</div>
</div>
</div>

<div class="alert alert-outline alert-warning" role="alert">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-warning" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-warning"></use>
</svg>
</div>
<div class="alert-text">
<p class="alert-title">Attention</p>
Cette macro nécessite le plugin <a class="font-weight-bold mx-2" href="https://github.com/lutece-platform/lutece-tech-plugin-asynchronousupload"><small><strong>AsynchronousUpload</strong></small></a> pour fonctionner !
<!-- Si vous utilisez une librairie autre que JQuery FileUpload inclue dans le plugin, il vous faudra modifier le HTML et ajouter le javascript nécessaire. -->
</div>
</div>
<script type="module">
import { themeUtils } from './themes/skin/parisfr/js/modules/theme-utils.js';
const uploadUtils = new themeUtils;
const aAsyncLinksToAddRemove = [{"name":"config.min.js","pathtoremove":"js/plugins/asynchronousupload/","pathtoadd":"themes/skin/parisfr/js/plugins/asynchronousupload/"}]
uploadUtils.replaceSourceLinksFromArray( aAsyncLinksToAddRemove )
</script>
<script>
/* Maps to manage files field errors */
var mapFileErrors = new Map();
var mapFilesNumber = new Map();
</script>
<script src="jsp/site/plugins/asynchronousupload/GetMainUploadJs.jsp?handler=formsAsynchronousUploadHandler" ></script>
<div class="form-row">
<div class="col ">
<p class="lead main-info-color my-m">
Zone de drop de fichiers</p>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="position-absolute p-3" style="z-index:5;top:0;right:0" >
<div id="liveFileToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="mr-auto">Attention</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body bg-white text-dark">Pas d'upload possible sur la démo</div>
</div>
</div>
<div class="form-group ">
<label class="" for="domicile">
Justificatif de domicile
</label>
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="form-row group-files dropzone no-file">
<div class="col">
<label id="lbdomicile" class="" for="domicile">Upload de fichiers <span class="main-danger-color" tabindex="-1" title="Obligatoire">*</span></label>
<div id="group-domicile" class="d-flex align-items-center file-input">
<input type="file" class="form-control my-xs disabled is-required formsAsynchronousUploadHandler"aria-required="true" data-nbuploadedfiles="0" name="files_domicile" id="domicile" multiple="multiple">
<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-left ms-sm mb-0">Glissez vos documents ici ou  <span class="text-primary text-underline">Sélectionner</span></p>
</div>
<div id="_file_error_box_domicile"></div>
<div id="progress_domicile" class="progress" 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>
<script>
window.addEventListener( 'DOMContentLoaded', (event) => {
const fieldName = $('#domicile');
const groupFieldName = $('#group-domicile');
const labelFieldName = $('#lbdomicile');
let hasChecked = false, countFiles=0;
mapFilesNumber.set( "domicile", 0 );
const isInputFileRequired = fieldName.hasClass('is-required');
if( isInputFileRequired ){
if( countFiles > 0 ){ fieldName.attr('data-nbuploadedfiles', countFiles ); }
const validateButton = document.querySelector('#doSaveForm');
validateButton.addEventListener('click', (e) => {
const fileItemsList = $('#_file_deletion_domicile .files-item');
const fileUploaded = fileItemsList.length;
$('.form-control:user-invalid').addClass('is-invalid');
$('.form-control:invalid').addClass('is-invalid');
const hasErrors = $(".is-invalid").length;
if( fileUploaded == 0 ){
groupFieldName.addClass('is-invalid');
labelFieldName.addClass('main-danger-color');
if( groupFieldName.next().hasClass('invalid-feedback') ){
groupFieldName.next().text('Le champs est obligatoire')
} else {
groupFieldName.after('<div class="invalid-feedback">Le champs est obligatoire</div>')
}
if( hasErrors == 0 ){
e.preventDefault();
$('html, body').scrollTop( groupFieldName.offset().top - 50 );
}
} else {
groupFieldName.removeClass('is-invalid');
labelFieldName.removeClass('main-danger-color');
}
})
}
});
</script>
</div>
</div>
</div>
<div class="form-row">
<div class="col ">
<p class="lead main-info-color my-m">
Zone + liste de fichiers upload</p>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="position-absolute p-3" style="z-index:5;top:0;right:0" >
<div id="liveFileToast2" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="mr-auto">Attention</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body bg-white text-dark">Pas d'upload possible sur la démo</div>
</div>
</div>
<div class="form-group ">
<label class="" for="domicile2">
Justificatif de domicile
</label>
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="form-row group-files dropzone no-file">
<div class="col">
<label id="lbdomicile2" class="" for="domicile2">Upload de fichiers </label>
<div id="group-domicile2" class="d-flex align-items-center file-input">
<input type="file" class="form-control my-xs disabled formsAsynchronousUploadHandler" data-nbuploadedfiles="0" name="files_domicile2" id="domicile2" multiple="multiple">
<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-left ms-sm mb-0">Glissez vos documents ici ou  <span class="text-primary text-underline">Sélectionner</span></p>
</div>
<div id="_file_error_box_domicile2"></div>
<div id="progress_domicile2" class="progress" 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_file_Upload_11">
<label class="files-item-label" for="_form_upload_checkbox_file_Upload_11">
<input type="checkbox" name="_form_upload_checkbox_file_Upload_11" id="_form_upload_checkbox_file_Upload_11">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_1&field_index=1&fileName=Mon attestation.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" title="Télécharger Mon attestation.docx" data-type="DOCX" data-img="">
<span class="file-item-label">Mon attestation.docx</span>
<span class="file-item-info">3 Ko</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_file_Upload_11" fieldName="file_Upload_1" handlerName="formsAsynchronousUploadHandler" index="1" title="Supprimer Mon attestation.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
<li class="files-item" id="_file_uploaded_file_Upload_21">
<label class="files-item-label" for="_form_upload_checkbox_file_Upload_21">
<input type="checkbox" name="_form_upload_checkbox_file_Upload_21" id="_form_upload_checkbox_file_Upload_21">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_2&field_index=1&fileName=Justificatif.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" title="Télécharger Justificatif.docx" data-type="DOCX" data-img="">
<span class="file-item-label">Justificatif.docx</span>
<span class="file-item-info">60 o</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_file_Upload_21" fieldName="file_Upload_2" handlerName="formsAsynchronousUploadHandler" index="1" title="Supprimer Justificatif.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
</div>
<script>
window.addEventListener( 'DOMContentLoaded', (event) => {
const fieldName = $('#domicile2');
const groupFieldName = $('#group-domicile2');
const labelFieldName = $('#lbdomicile2');
let hasChecked = false, countFiles=0;
mapFilesNumber.set( "domicile2", 0 );
const isInputFileRequired = fieldName.hasClass('is-required');
if( isInputFileRequired ){
if( countFiles > 0 ){ fieldName.attr('data-nbuploadedfiles', countFiles ); }
const validateButton = document.querySelector('#doSaveForm');
validateButton.addEventListener('click', (e) => {
const fileItemsList = $('#_file_deletion_domicile2 .files-item');
const fileUploaded = fileItemsList.length;
$('.form-control:user-invalid').addClass('is-invalid');
$('.form-control:invalid').addClass('is-invalid');
const hasErrors = $(".is-invalid").length;
if( fileUploaded == 0 ){
groupFieldName.addClass('is-invalid');
labelFieldName.addClass('main-danger-color');
if( groupFieldName.next().hasClass('invalid-feedback') ){
groupFieldName.next().text('Le champs est obligatoire')
} else {
groupFieldName.after('<div class="invalid-feedback">Le champs est obligatoire</div>')
}
if( hasErrors == 0 ){
e.preventDefault();
$('html, body').scrollTop( groupFieldName.offset().top - 50 );
}
} else {
groupFieldName.removeClass('is-invalid');
labelFieldName.removeClass('main-danger-color');
}
})
}
});
</script>
</div>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="form-group ">
<button class="btn btn-action" type="submit" id="doSaveForm">
<span class="btn-label ">Valider</span>
</button>
<button class="btn btn-link-action" type="submit">
<svg class="paris-icon paris-icon-close" focusable="false" >
<use xlink:href="#paris-icon-close"></use>
</svg>
<span class="btn-label ">Annuler</span>
</button>
</div>
</div>
</div>
<script>
// Demo only
$( document ).on('click', '.deleteSingleFile', function(event) {
event.preventDefault();
const currInput = $('#domicile2');
let nbInputFiles = currInput.attr('data-nbuploadedfiles') - 1
currInput.attr('data-nbuploadedfiles', nbInputFiles )
event.preventDefault( );
event.currentTarget.closest('.files-item').setAttribute('hidden','hidden');
});
$( document ).on('click', '#domicile', function(event) {
event.preventDefault();
$('#liveFileToast').toast('show')
const hiddenFiles = document.querySelectorAll('[hidden]');
hiddenFiles.forEach( (hf) => {
hf.removeAttribute('hidden');
return;
})
});
$( document ).on('click', '#domicile2', function(event) {
event.preventDefault();
$('#liveFileToast2').toast('show')
const hiddenFiles = document.querySelectorAll('[hidden]');
hiddenFiles.forEach( (hf) => {
hf.removeAttribute('hidden');
return;
})
});
</script>

<form method="post">
<div class="form-row">
<div class="col " aria-describedby="radioHelp2">
<div class="form-group ">
<label class="">
Yes or No ?
</label>
<!-- Inline -->
<p class="form-text " id="help_radioHelp">
Radio Help</p>
<div class='radio-container'>
<div class="custom-control custom-radio">
<input type="radio" id="rRadio0-901083" name="rRadio" class="custom-control-input" value="1">
<label class="custom-control-label" for="rRadio0-901083">Yes</label>
</div>
</div>
<div class='radio-container'>
<div class="custom-control custom-radio">
<input type="radio" id="rRadio0-821264" name="rRadio" class="custom-control-input" value="2">
<label class="custom-control-label" for="rRadio0-821264">No</label>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col " aria-describedby="radioHelp2">
<!-- Column -->
<label class="">
Ok or Nok ?
</label>
<div class="form-row">
<div class="col ">
<p class="form-text " id="help_radioHelp2">
Radio Ok Nok Help</p>
<div class='radio-container custom-control-inline'>
<div class="custom-control custom-radio">
<input type="radio" id="ok" name="oknok" class="custom-control-input" value="1">
<label class="custom-control-label" for="ok">Ok</label>
</div>
</div>
<div class='radio-container custom-control-inline'>
<div class="custom-control custom-radio">
<input type="radio" id="nok" name="oknok" class="custom-control-input" value="2">
<label class="custom-control-label" for="nok">Nok</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col " aria-describedby="radioHelpSelection">
<div class="form-group ">
<label class="">
Quel est votre choix ?
</label>
<p class="form-text " id="help_radioHelpSelection">
Radio Help</p>
<!-- Selection button -->
<div class='radio-container mb-l'>
<div class="custom-control custom-radio btn-selection">
<input type="radio" id="selectionRadio0-741444" name="selectionRadio" class="custom-control-input" value="1">
<label class="custom-control-label" for="selectionRadio0-741444">Choix numéro 1</label>
<p class="selection-subtitle mt-3">Sous-titre d&apos;explication</p>
</div>
<div class="selection-content"><div class="form-row">
<div class="col ">
<label class="" for="name3">
Nom
</label>
<p class="form-text " id="help_name3">
Saisir mon nom</p>
<input type="text" class=" form-control" name="name3" id="name3" value="Dupont" aria-describedby="help_name3">
</div>
<div class="col ">
<label class="" for="surname3">
Prénom
</label>
<p class="form-text " id="help_surname3">
Saisir mon prénom</p>
<input type="text" class=" form-control" name="surname3" id="surname3" value="" placeholder="Exemple: Jean Yves" aria-describedby="help_surname3">
</div>
</div>
</div>
</div>
<div class='radio-container mb-l'>
<div class="custom-control custom-radio btn-selection">
<input type="radio" id="selectionRadio0-771625" name="selectionRadio" class="custom-control-input" value="2">
<label class="custom-control-label" for="selectionRadio0-771625">Choix numéro 2</label>
<p class="selection-subtitle mt-3">Sous-titre d&apos;explication</p>
</div>
<div class="selection-content"><div class="form-row">
<div class="col ">
<label class="" for="name4">
Nom
</label>
<p class="form-text " id="help_name4">
Saisir mon nom</p>
<input type="text" class=" form-control" name="name4" id="name4" value="Dupont" aria-describedby="help_name4">
</div>
<div class="col ">
<label class="" for="surname4">
Prénom
</label>
<p class="form-text " id="help_surname4">
Saisir mon prénom</p>
<input type="text" class=" form-control" name="surname4" id="surname4" value="" placeholder="Exemple: Jean Yves" aria-describedby="help_surname4">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>

<form method="post">
<div class="form-row">
<div class="col " aria-describedby="radioHelp2">
<div class="form-group ">
<label class="">
Horaire
</label>
<p class="form-text " id="help_radioHelp2">
Choisir un horaire</p>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="football" name="sport" class="custom-control-input" value="foot">
<label class="custom-control-label" for="football">Football </label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="judo" name="sport" class="custom-control-input" value="judo">
<label class="custom-control-label" for="judo">Judo </label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="natation" name="sport" class="custom-control-input" value="nata">
<label class="custom-control-label" for="natation">Natation </label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" id="tennis" name="sport" class="custom-control-input" value="tenn">
<label class="custom-control-label" for="tennis">Tennis </label>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col " aria-describedby="selectHelp">
<div class="form-group ">
<label class="">
Quel choix ?
</label>
<p class="form-text " id="help_selectHelp">
Faites votre choix</p>
<div class="custom-control btn-selection custom-checkbox">
<input type="checkbox" id="selectFootball" name="selectCheckbox" class="custom-control-input" value="foot">
<label class="custom-control-label" for="selectFootball">Football </label>
<p class='selection-subtitle mt-3'>Sport avec un ballon.</p>
</div>
<div class="custom-control btn-selection custom-checkbox">
<input type="checkbox" id="selectJudo" name="selectCheckbox" class="custom-control-input" value="judo">
<label class="custom-control-label" for="selectJudo">Judo </label>
<p class='selection-subtitle mt-3'>Sport de combat.</p>
</div>
<div class="custom-control btn-selection custom-checkbox">
<input type="checkbox" id="selectNatation" name="selectCheckbox" class="custom-control-input" value="nata">
<label class="custom-control-label" for="selectNatation">Natation </label>
<p class='selection-subtitle mt-3'>Sport dans l&apos;eau.</p>
</div>
<div class="custom-control btn-selection custom-checkbox">
<input type="checkbox" id="selectTennis" name="selectCheckbox" class="custom-control-input" value="tenn" disabled>
<label class="custom-control-label" for="selectTennis">Tennis </label>
<p class='selection-subtitle mt-3'>Sport de raquette.</p>
</div>
</div>
</div>
</div>
</form>

<div class="form-row">
<div class="col " aria-describedby="cSelect">
<div class="form-group ">
<label class="">
Commune
</label>
<select name="commune" class="form-control custom-select" multiple>
<option value="0"></option>
<option value="1">Paris (75000)</option>
<option value="2">Parigné-l Eveque (72250)</option>
<option value="3">Parigné (35133)</option>
<option value="4">Parigné-le-Polin (72330)</option>
</select>
<p class="form-text " id="help_cSelect">
Aide Combo Box</p>
</div>
</div>
</div>
<div class="form-row mt-3">
<div class="col ">
<div class="form-group ">
<label class="">
Commune
</label>
<select name="" class="form-control custom-select">
<option value="0"></option>
<option value="1">Paris (75000)</option>
<option value="2" selected>Parigné-l Eveque (72250)</option>
<option value="3">Parigné (35133)</option>
<option value="4">Parigné-le-Polin (72330)</option>
</select>
</div>
</div>
</div>
<div class="form-row mt-3">
<div class="col " aria-describedby="cOptGroup">
<div class="form-group ">
<label class="">
Catégories
</label>
<select name="" class="form-control custom-select">
<option value="0"></option>
<optgroup label="Catégories 1" >
<option value="11">Item 1 1</option>
<option value="12">Item 1 2</option>
<option value="13">Item 1 3</option>
</optgroup>
<optgroup label="Catégories 2" >
<option value="21">Item 2 1</option>
<option value="22">Item 2 2</option>
<option value="23">Item 2 3</option>
</optgroup>
</select>
<p class="form-text " id="help_cOptGroup">
Aide OptGroup</p>
</div>
</div>
</div>

<section class="step step-done ">
<section class="step-title">
<div class="container d-flex justify-content-between">
<h2 class="title">
<span class="step-number">
<svg width="32" height="32" 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>
Accueil</span>
</h2>
<span class="d-none d-sm-block pl-2">
<button class="btn btn-secondary btn-sm-block" type="submit"name="action_doGoToStep"value="1" aria-label="Modifier l'étape Accueil" formnovalidate>
<span class="btn-label ">Modifier</span>
</button>
</span>
</div>
</section>
<div class="container">
<div class="step-content">
<div class="form-row">
<div class="col ">
Ce questionnaire est personnel
</div>
</div>
<div class="form-row">
<div class="col ">
<label class="">
Votre nom
</label>
Marcel
</div>
</div>
<div class="d-block d-sm-none mt-m">
<button class="btn btn-primary btn-sm-block" type="submit"name="action_doGoToStep"value="1" aria-label="Modifier l'étape Accueil" formnovalidate>
<span class="btn-label ">Modifier</span>
</button>
</div>
</div>
</div>
</section>

<section class="step step-current " id="current_step">
<section class="step-title">
<div class="container">
<h2 class="title" data-step="2" title="Dossier - étape en cours" aria-current="step">
<span class="step-number">
2</span>
<span>
Dossier</span>
</h2>
</div>
</section>
<div class="container">
<section class="step-content">
<div class="form-row">
<div class="col sr-only">
<p class="mandatory-warning">
Les champs suivis d'un astérisque * sont obligatoires.</p>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="form-group ">
<label class="" for="fname">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<input type="text" class=" form-control" name="fname" id="fname" value="" placeholder="Exemple: Durand">
<p class="form-text " id="help_fname">
Saisir votre nom de famille</p>
</div>
</div>
<div class="col ">
<div class="form-group ">
<label class="" for="firstname-step">
Prénom
</label>
<input type="text" class=" form-control" name="firstname-step" id="firstname-step" value="">
</div>
</div>
</div>
<div class="form-row">
<div class="col " aria-describedby="mydata">
<div class="form-group ">
<label class="" for="mydata">
Conserver ces données
</label>
<div class="form-row">
<div class="col ">
<div class='radio-container custom-control-inline'>
<div class="custom-control custom-radio">
<input type="radio" id="md2" name="mydata" class="custom-control-input" value="1">
<label class="custom-control-label" for="md2">Oui</label>
</div>
</div>
<div class='radio-container custom-control-inline'>
<div class="custom-control custom-radio">
<input type="radio" id="md1" name="mydata" class="custom-control-input" value="2">
<label class="custom-control-label" for="md1">Non</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-12 col-md-10 ">
<p class="mandatory-warning">
Les champs suivis d'un astérisque * sont obligatoires.</p>
</div>
</div>
<div class="form-row">
<div class="col-12 d-flex justify-content-end mb-l">
</div>
</div>
</section>
</div>
</section>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const current = document.querySelector('#current_step');
const y = current.offsetTop - 180;
window.scrollBy(0, y);
const formValidateButton = document.querySelector('#');
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')
const isRequired = invalid.getAttributeNode('required');
if( isRequired !='' ){
let pInvalid = document.createElement("p");
pInvalid.classList.add( 'invalid-feedback' );
pInvalid.setAttribute( 'role', 'alert' );
pInvalid.innerHTML = `Les champs suivis d'un astérisque * sont obligatoires.`;
invalid.after( pInvalid );
}
});
})
});
</script>

<section class="step step-next">
<section class="step-title">
<div class="container">
<h2 class="title" data-step="3">
<span class="step-number">
3</span>
<span>
Localisation</span>
</h2>
</div>
</section>
</section>

<p class="lead">
Contenu d'une étape : Avec bulle d'aide</p>
<section class="step step-current " id="current_step">
<section class="step-title">
<div class="container">
<h2 class="title" data-step="2" title="Dossier - étape en cours" aria-current="step">
<span class="step-number">
2</span>
<span>
Dossier</span>
</h2>
</div>
</section>
<div class="container">
<section class="step-content">
<div class="form-row">
<div class="col sr-only">
<p class="mandatory-warning">
Les champs suivis d'un astérisque * sont obligatoires.</p>
</div>
</div>
<div class="form-row">
<section class="w-100 flex-fill step-group ">
<a href="" name="last_" >
</a>
<div class="container">
<div class="row ">
<div class="col-12 px-3 ">
<h2 class="title">
Information </h2>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="accordion" id="acc0">
<div class="card outline my-l" >
<h3 class="card-header m-0" data-toggle="collapse" data-target="#collapseAcc0" role="combobox" aria-expanded="true" aria-controls="collapseAcc0">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-target="#collapseAcc0" aria-expanded="true" aria-controls="collapseAcc0">
<span class="d-flex align-items-center flex-1">
<span class="card-header-prepend">
<svg class="paris-icon paris-icon-alert-info" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-info"></use>
</svg>
</span>
<span id="headingAcc0">Aide sur Information.</span>
<span class="card-header-separator"></span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion">
<svg class="paris-icon paris-icon-arrow-bottom" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAcc0" class="m-0 collapse show" role="region" aria-labelledby="headingAcc0" data-parent="#acc0">
<div class="card-body">
Lorem ipsum Help
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-target="#collapseAcc0" aria-expanded="true" aria-controls="collapseAcc0">
<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>
</div>
<div class="form-row">
<div class="col ">
<div class="form-group ">
<label class="" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand">
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
</div>
</div>
<div class="col ">
<div class="form-group ">
<label class="" for="firstname">
Prénom
</label>
<input type="text" class=" form-control" name="firstname" id="firstname" value="">
</div>
</div>
</div>
</div>
</section>
</div>
<hr>
<p class="lead">
Contenu d'une étape avec au moins une itération</p>
<div class="form-row">
<section class="w-100 flex-fill step-group ">
<a href="" name="last_" >
</a>
<div class="container">
<div class="row ">
<div class="col-12 px-3 d-flex justify-content-between">
<h2 class="title">
Information avec Itération (2)</h2>
<div class="text-right">
<button class="btn btn-danger btn-mini ms-m" type="submit"name="action_removeIteration" value="rm_1">
<svg class="paris-icon paris-icon-trash" focusable="false" >
<use xlink:href="#paris-icon-trash"></use>
</svg>
<span class="btn-label">
Supprimer</span>
</button>
</div>
</div>
</div>
<div class="form-row">
<div class="col ">
<div class="form-group ">
<label class="" for="name635">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<input type="text" class=" form-control" name="name635" id="name635" value="" placeholder="Exemple: Durand">
<p class="form-text " id="help_name635">
Saisir votre nom de famille</p>
</div>
</div>
<div class="col ">
<div class="form-group ">
<label class="" for="firstname-2">
Prénom
</label>
<input type="text" class=" form-control" name="firstname-2" id="firstname-2" value="">
</div>
</div>
</div>
<div class="form-row">
<div class="col px-4 px-sm-5 d-flex justify-content-end">
<button class="btn btn-mini ms-m" type="submit"name="action_addIteration" value="add_1">
<svg class="paris-icon paris-icon-plus" focusable="false" >
<use xlink:href="#paris-icon-plus"></use>
</svg>
<span class="btn-label">
Ajouter</span>
</button>
</div>
</div>
</div>
</section>
</div>
<div class="form-row">
<div class="col-12 col-md-10 ">
<p class="mandatory-warning">
Les champs suivis d'un astérisque * sont obligatoires.</p>
</div>
</div>
<div class="form-row">
<div class="col-12 d-flex justify-content-end mb-l">
</div>
</div>
</section>
</div>
</section>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const current = document.querySelector('#current_step');
const y = current.offsetTop - 180;
window.scrollBy(0, y);
const formValidateButton = document.querySelector('#');
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')
const isRequired = invalid.getAttributeNode('required');
if( isRequired !='' ){
let pInvalid = document.createElement("p");
pInvalid.classList.add( 'invalid-feedback' );
pInvalid.setAttribute( 'role', 'alert' );
pInvalid.innerHTML = `Les champs suivis d'un astérisque * sont obligatoires.`;
invalid.after( pInvalid );
}
});
})
});
</script>

<p>
<div class="fr-connect-group m-0">
<button class="fr-connect m-0" type="submit">
<span class="fr-connect__login">
Créer mon compte avec</span>
<span class="fr-connect__brand">
FranceConnect</span>
</button>
</div>
</p>
<p>
<svg height="74" viewBox="0 0 312 74" width="248" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
<clipPath id="a"><path d="m0 0h312v74h-312z"/></clipPath>
<g clip-path="url(#a)">
<path d="m0 0h312v74h-312z" fill="#fff"/>
<rect fill="#000091" height="74" rx="4" width="312"/>
<rect id="fc-btn-bg" fill="#000091" height="70" rx="4" transform="translate(1 1)" width="310"/>
<text fill="#fff" font-family="Montserrat-Regular, Montserrat" font-size="15" font-weight="500" transform="translate(81 32)">
<tspan x="0" y="0">Quid</tspan>
<tspan font-family="Montserrat-Bold, Montserrat" font-weight="700" font-size="18"><tspan x="0" y="20">FranceConnect</tspan></tspan>
</text>
<path d="m18 19.508v29.93l25.9 15.007 25.984-15.008v-29.929l-25.984-15.008z" fill="#fff" transform="translate(-5.142 1.529)"/>
<path d="m43.757 3.3-26.757 15.522v30.959l26.842 15.436 26.843-15.436v-30.959zm25.984 45.966-25.984 15.008-25.9-15.008v-29.929l25.9-15.008 25.984 15.008z" fill="#000091" transform="translate(-5 1.7)"/><path d="m57.373 19.675-11.749-6.775-11.748 6.775-7.976 4.631v22.726l19.724 11.406 19.725-11.406v-22.726z" fill="#0069cc" transform="translate(-6.268 .333)"/><path d="m62.107 35.626-7.118-12.264-6.089-10.462v45.538l19.724-11.406z" fill="#000091" transform="translate(-9.544 .333)"/><path d="m56 24.488 7.118 12.263 6.518-11.32-7.976-4.631z" fill="#0069cc" transform="translate(-10.555 -.792)"/><path d="m60.649 19.675-11.749-6.775 6.089 10.463z" fill="#ed1c24" transform="translate(-9.544 .333)"/><path d="m54.989 23.362-6.089-10.462z" fill="#0069cc" transform="translate(-9.544 .333)"/><path d="m70.818 48.926v-22.726l-6.518 11.32z" fill="#ed1c24" transform="translate(-11.737 -1.561)"/><path d="m64.3 39.4 6.518 11.406z" fill="#ed1c24" transform="translate(-11.737 -3.441)"/>
<path d="m32.5 35.626 7.118-12.263 6-10.463v45.538l-19.718-11.406z" fill="#0069cc" transform="translate(-6.268 .333)"/>
<path d="m39.621 24.488-7.121 12.263-6.6-11.32 7.976-4.631z" fill="#ed1c24" transform="translate(-6.268 -.792)"/>
<path d="m35.2 19.675 11.749-6.775-6 10.463z" fill="#000091" transform="translate(-7.592 .333)"/>
<path d="m41.9 23.362 6-10.463z" fill="#0069cc" transform="translate(-8.547 .333)"/>
<path d="m25.9 48.926v-22.726l6.6 11.32z" fill="#000091" transform="translate(-6.268 -1.561)"/>
<path d="m32.5 39.4-6.6 11.406z" fill="#0069cc" transform="translate(-6.268 -3.441)"/>
<path d="m57.144 41.909a4.133 4.133 0 0 1 1.029 0c.257.086.6.086.6.172-.086.515-.858.6-1.2 1.115h-.173c-.172.086-.086.429-.257.429-.172-.086-.343 0-.6.086a1.02 1.02 0 0 0 .943.343c.086 0 .172.086.172.257a.084.084 0 0 0 .086-.086c.086 0 .086 0 .086.086v.257c-.172.257-.515.172-.772.172a4.155 4.155 0 0 0 1.458 0c.343-.172 0-.772.257-1.029-.086 0 0-.172-.172-.172.086-.086.257-.343.343-.343s.343-.086.343-.172-.257-.172-.172-.343c.343-.257.686-.6.515-1.029-.086-.172-.6-.172-.858-.257a2.112 2.112 0 0 0 -1.029.086 3.866 3.866 0 0 0 -.943.257 8.57 8.57 0 0 0 -1.2.686 16.245 16.245 0 0 1 1.544-.515z" fill="#000091" transform="translate(-10.498 -3.72)"/>
<path d="m57.617 43.546a6.545 6.545 0 0 0 -.686-.943 3.732 3.732 0 0 1 -.686-1.286 4.163 4.163 0 0 1 0-1.458 9.721 9.721 0 0 0 -.515-2.744c-.172-.429-.257-.943-.429-1.372a3.046 3.046 0 0 0 -.343-.772.389.389 0 0 1 0-.429 2.61 2.61 0 0 0 .686-.686.78.78 0 0 0 -.257-.943c-.429-.172-.343.429-.686.6h-.172c-.086-.172.086-.257.172-.343 0-.086 0-.172-.086-.172a1 1 0 0 1 -.6-.172 5.263 5.263 0 0 0 -2.487-1.626 2.374 2.374 0 0 0 .772.086 2.156 2.156 0 0 0 1.286-.172c.343-.172.343-.6.429-.943.086-.086 0-.172 0-.343s-.172-.343-.257-.515a1.061 1.061 0 0 1 -.172-.257c-.686-.772-3.345-3-8.319-2.659a21.349 21.349 0 0 0 -7.89 2.315c-.086 0-.172.086-.343.086a5.336 5.336 0 0 0 -1.629 1.202 4.836 4.836 0 0 0 -1.115 2.058 5.667 5.667 0 0 0 -1.715 2.058c-.515 1.029-1.2 1.887-1.2 3v.172c.086.343.086.6.172.943a17.563 17.563 0 0 1 .429 2.058l.257 1.029c.172.343 0 .772.257 1.115.086.172.086.429.343.515v.252c.086.086.086.086.172.086v.257a9.59 9.59 0 0 1 1.458 1.8c.172.343-.6.172-.943.086a6.813 6.813 0 0 1 -1.544-1.2l-.086.086c.257.429 1.2.943.686 1.286-.257.172-.6-.172-.772.086-.086.086 0 .257 0 .343-.343-.257-.772-.086-1.115-.257-.257-.086-.343-.515-.6-.515a10.811 10.811 0 0 0 -2.4-.343h-.172a9.9 9.9 0 0 0 -2.23-.086v.943a8.609 8.609 0 0 1 2.058-.343h.172c.172 0 .429-.086.6 0a2.918 2.918 0 0 0 -.858.086 9.334 9.334 0 0 0 -2.058.6v.858c.343.086.772.086 1.115.172a7.144 7.144 0 0 1 1.286.343 8.421 8.421 0 0 1 1.544.686c.257.172.343.343.6.515a1.09 1.09 0 0 0 1.029 0h.343a4.366 4.366 0 0 0 2.482-1.289.084.084 0 0 0 .086.086 5.451 5.451 0 0 1 -.515 1.544c0 .086-.086.172.086.257h.086c-.086 0-.086 0-.086.086s.172 0 .257.086a1.155 1.155 0 0 0 -.772.429c0 .086.086.086.172.086-.086.086-.343.086-.343.172l.086.086c-.086 0-.086 0-.086.086v.172c-.172 0-.257.172-.343.172.257.172.429 0 .686 0a18.349 18.349 0 0 1 -1.887.858c-.086 0 0 .172-.086.172.172.086.343-.086.515-.086a6.4 6.4 0 0 1 -1.029.6l2.058 1.2a9.718 9.718 0 0 0 2.315-1.885l.086.086a2.869 2.869 0 0 1 -1.029 1.458c-.343.172-.6.515-.858.6l1.544.858a4.054 4.054 0 0 1 1.029-.6c.086 0 .172.086.343.086a2.221 2.221 0 0 1 1.972-.943c0 .086 0 .086.086.086a.084.084 0 0 0 .086-.086c0 .086 0 .086-.086.086-.257.172-.429.343-.686.515-.086.086 0 .086.086.086a6.019 6.019 0 0 0 .772-.515.315.315 0 0 0 -.086.257 13.786 13.786 0 0 0 -1.972 1.887l8.151 4.718c.257-.343.6-.858.943-1.286a72.649 72.649 0 0 1 4.459-5.917 2.517 2.517 0 0 1 .858-.257c1.029 0 2.144.257 3.173.343.086 0 .257.086.343.086a2.948 2.948 0 0 0 1.2-.086 1.741 1.741 0 0 0 1.115-.943 1.544 1.544 0 0 0 0-1.372c-.429-.515.343-.772.6-1.115.172-.343-.172-.515-.172-.772-.086-.086-.343-.086-.429-.257.429-.172 1.115-.6.772-1.115-.172-.343-.515-.772-.172-1.115.429-.257 1.115-.257 1.286-.686.517-.862-.254-1.462-.597-2.062zm-2.659-3.087c-.086.086.172.172.172.343a.65.65 0 0 1 -.343.172l-.343.343c.086 0 0 .172.172.172-.257.343.172.943-.257 1.029a2.126 2.126 0 0 1 -1.458 0c.257-.086.6.086.772-.172v-.257a.084.084 0 0 0 -.087-.089l-.086.086c0-.086-.172-.257-.172-.257a1.02 1.02 0 0 1 -.943-.343.7.7 0 0 1 .6-.086c.172 0 .086-.343.257-.429h.172c.343-.515 1.115-.686 1.2-1.115 0-.086-.343-.086-.6-.172a4.132 4.132 0 0 0 -1.029 0 6.427 6.427 0 0 0 -1.372.429 5.468 5.468 0 0 1 1.2-.686 3.866 3.866 0 0 1 .943-.257 2.19 2.19 0 0 1 1.029-.086c.343.086.772.086.858.257a1.677 1.677 0 0 1 -.685 1.117z" fill="#fff" transform="translate(-6.168 -1.583)"/>
</g>
</svg>
</p>
<div class="card ">
<div class="card-body">
<p>
Quoi de plus...<br/>
<a href="https://franceconnect.gouv.fr/" title="Plus d'informations sur le site de FranceConnect [Nouvelle Fenêtre]" target="_blank" rel="noopener" >
<span class="link-label">Plus d'informations sur le site de FranceConnect</span>
</a>
</p>
</div>
</div>

<p>
<a href="http://fr.lutece.paris.fr" class="link-secondary" target="_blank" >
<span class="link-label">Link secondary</span>
</a>
</p>
<p>
<a href="http://fr.lutece.paris.fr" class="link-secondary disabled" target="_blank" >
<span class="link-label">Link secondary</span>
</a>
</p>
<p>
<a href="http://paris.fr" class="btn btn-primary" title="Site de la Ville de Paris [Nouvelle Fenêtre]" target="_blank" >
<span class="link-label">Link primary</span>
</a>
</p>
<p>
<a href="http://paris.fr" class="btn btn-primary disabled" title="Site de la Ville de Paris [Nouvelle Fenêtre]" target="_blank" >
<span class="link-label">Link primary</span>
</a>
</p>
<p>
<a href="http://paris.fr" title="Site de la Ville de Paris" >
<svg class="paris-icon paris-icon-shortcut/id-card main-color" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-shortcut/id-card"></use>
</svg>
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</p>
<p>
<a href="http://paris.fr" class="btn btn-action" title="Site de la Ville de Paris" >
<svg class="paris-icon paris-icon-check text-white" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-check"></use>
</svg>
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</p>
<p>
<a href="https://www.ow2.org/" class="btn btn-outline-primary" title="OW2 is an independent, global, open-source software community [Nouvelle Fenêtre]" target="_blank" >
<span class="link-label">OW2</span>
</a>
</p>

<div class="card ">
<div class="card-body">
<h3 class="card-title ">
Liste de liens </h3>
<ul class="custom-list list-default" >
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://paris.fr" title="Page de Paris.fr dédiée aux régles d'urbanisme" target="_blank">
<span>Page de Paris.fr dédiée aux régles d'urbanisme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://www.paris.fr/municipalite" title="Consultation du PLU" target="_blank">
<span>Consultation du PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" title="Site de la Ville de Paris [Nouvelle Fenêtre]" target="_blank" >
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</li>
</ul>
<ul class="custom-list list-default list-highlight-secondary" >
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://paris.fr" title="Page de Paris.fr dédiée aux régles d'urbanisme" target="_blank">
<span>Page de Paris.fr dédiée aux régles d'urbanisme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://www.paris.fr/municipalite" title="Consultation du PLU" target="_blank">
<span>Consultation du PLU </span>
</a>
</li>
<li>
<a href="http://paris.fr" title="Site de la Ville de Paris [Nouvelle Fenêtre]" target="_blank" >
<span class="link-label">Decouvrir Paris.fr</span>
</a>
</li>
</ul>
</div>
</div>
<div class="card ">
<div class="card-body">
<h3 class="card-title ">
Liste de fichiers </h3>
<ul class="custom-list list-files" >
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://paris.fr" title="Régles d'urbanisme.pdf" target="_blank" download="Régles_d_urbanisme.pdf">
<span>Régles d'urbanisme.pdf </span>
<div class="files-info">
<small>80ko</small>
<svg class="paris-icon paris-icon-file-text ml-m main-color" focusable="false" >
<use xlink:href="#paris-icon-file-text"></use>
</svg>
</div>
</a>
</li>
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx">
<span>PLU.docx </span>
<div class="files-info">
<small>80ko</small>
<svg class="paris-icon paris-icon-file-text ml-m main-color" focusable="false" >
<use xlink:href="#paris-icon-file-text"></use>
</svg>
</div>
</a>
</li>
</ul>
<ul class="custom-list list-files list-highlight-secondary" >
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://paris.fr" title="Régles d'urbanisme.pdf" target="_blank" download="Régles_d_urbanisme.pdf">
<span>Régles d'urbanisme.pdf </span>
<div class="files-info">
<small>80ko</small>
<svg class="paris-icon paris-icon-file-text ml-m main-color" focusable="false" >
<use xlink:href="#paris-icon-file-text"></use>
</svg>
</div>
</a>
</li>
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://www.paris.fr/" title="PLU.docx" download="PLU.docx">
<span>PLU.docx </span>
<div class="files-info">
<small>80ko</small>
<svg class="paris-icon paris-icon-file-text ml-m main-color" focusable="false" >
<use xlink:href="#paris-icon-file-text"></use>
</svg>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="card ">
<div class="card-body">
<h3 class="card-title ">
Liste de liens</h3>
<ul class="custom-list list-more more-list" >
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://teleservices2.rec.apps.paris.fr/forms" title="Tout sur le théme" target="_blank">
<span>Tout sur le théme </span>
</a>
</li>
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://lutece.paris.fr/" title="Tout sur Lutéce" >
<span>Tout sur Lutéce </span>
</a>
</li>
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://www.allocine.fr/film/fichefilm_gen_cfilm=7868.html" title="Tout sur ma mére" >
<span>Tout sur ma mére </span>
</a>
</li>
<li class="custom-list-item ">
<a class="d-flex justify-content-between align-items-center" href="https://teleservices2.rec.apps.paris.fr/forms" title="Tout sur le théme" target="_blank">
<span>Tout sur le théme </span>
</a>
</li>
<li class="custom-list-item extra hidden">
<a class="d-flex justify-content-between align-items-center" href="https://lutece.paris.fr/" title="Tout sur Lutéce" >
<span>Tout sur Lutéce </span>
</a>
</li>
<li class="custom-list-item extra hidden">
<a class="d-flex justify-content-between align-items-center" href="https://www.allocine.fr/film/fichefilm_gen_cfilm=7868.html" title="Tout sur ma mére" >
<span>Tout sur ma mére </span>
</a>
</li>
<li class="more">
<a href="#" class="btn-more" title="Voir plus" data-plus="Voir plus" data-minus="Fermer" >
<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">Voir plus</span>
</a>
</li>
</ul>
</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 align-items-baseline" role="alert">
<div class="alert-icon">
<svg class="paris-icon paris-icon-alert-danger" focusable="false" >
<title>information</title>
<use xlink:href="#paris-icon-alert-danger"></use>
</svg>
</div>
<div class="alert-text">
Erreur Enorme
<p class="mt-l font-extra-bold">
Grossière erreur tout est à revoir</p>
<p class="text-center mt-l">
<a href="." class="btn btn-primary" >
<span class="link-label">On y va !</span>
</a>
</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row justify-content-between align-items-center">
<span class="filter-result">
44 résultats</span>
<button class="btn btn-secondary m-1 d-flex align-items-center" type="submit" id="filter-toggle-button">
<svg class="paris-icon paris-icon-filter main-info-color mr-3" focusable="false" >
<title>Filter</title>
<use xlink:href="#paris-icon-filter"></use>
</svg>
<span class="btn-label ">Masquer les filtres</span>
</button>
</div>
<div class="row " id="filters-container">
<fieldset class="d-flex m-0 flex-wrap">
<legend class='sr-only'>Liste de filtres</legend>
<div class="form-group ">
<div class=" btn-selection custom-control filter-custom-control custom-checkbox d-flex align-items-center mr-3">
<input type="checkbox" id="filter1" name="selectCheckbox" class="custom-control-input" value="filter">
<label class="custom-control-label" for="filter1">Filter 1 </label>
</div>
</div>
<div class="form-group ">
<div class=" btn-selection custom-control filter-custom-control custom-checkbox d-flex align-items-center mr-3">
<input type="checkbox" id="filter2" name="selectCheckbox" class="custom-control-input" value="filter">
<label class="custom-control-label" for="filter2">Filter 2 </label>
</div>
</div>
<div class="form-group ">
<div class=" btn-selection custom-control filter-custom-control custom-checkbox d-flex align-items-center mr-3">
<input type="checkbox" id="filter3" name="selectCheckbox" class="custom-control-input" value="filter">
<label class="custom-control-label" for="filter3">Filter 3 </label>
</div>
</div>
</fieldset>
<button class="btn btn-primary h-100" type="submit">
<span class="btn-label ">Rechercher</span>
</button>
<button class="btn btn-tertiary h-100" type="submit" id="filter-erase-button">
<span class="btn-label ">Tout effacer</span>
</button>
</div>
</div>
<script type="module" src="themes/skin/parisfr/js//modules/theme-filter.js"></script>

<div class="nav nav-tabs" role="tablist" >
<button type="button" id="tab_TabContent1" aria-controls="TabContent1" data-toggle="tab" role="tab" data-target="#TabContent1" class="nav-link active" aria-selected="true">
Onglet 1</button>
<button type="button" id="tab_TabContent2" aria-controls="TabContent2" data-toggle="tab" role="tab" data-target="#TabContent2" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 2 </button>
<button type="button" id="tab_TabContent3" aria-controls="TabContent3" data-toggle="tab" role="tab" data-target="#TabContent3" class="nav-link" tabindex="-1" aria-selected="false">
Onglet 3</button>
<button type="button" id="tab_TabContent4" aria-controls="TabContent4" data-toggle="tab" role="tab" data-target="#TabContent4" class="nav-link disabled" disabled tabindex="-1" aria-disabled="true" aria-selected="false">
Onglet 4</button>
</div>
<div class="tab-content " id="myContent">
<div class="card tab-pane fade show active" id="TabContent1" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent1" >
<div class="card-header" role="tab" id="heading-TabContent1">
<h3 class="h5 mb-0">
<a data-toggle="collapse" href="#collapse-TabContent1" aria-expanded="false" aria-controls="collapse-TabContent1" class="collapsed tab-collapse">
Onglet 1
</a>
</h3>
</div>
<div id="collapse-TabContent1" class="collapse" data-parent="#TabContent1" role="tabpanel" aria-labelledby="heading-TabContent1">
<div class="card-body">
<p>
Contenu Tab 1</p>
</div>
</div>
</div>
<div class="card tab-pane fade" id="TabContent2" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent2" >
<div class="card-header" role="tab" id="heading-TabContent2">
<h3 class="h5 mb-0">
<a data-toggle="collapse" href="#collapse-TabContent2" aria-expanded="false" aria-controls="collapse-TabContent2" class="collapsed tab-collapse">
Onglet 2
</a>
</h3>
</div>
<div id="collapse-TabContent2" class="collapse" data-parent="#TabContent2" role="tabpanel" aria-labelledby="heading-TabContent2">
<div class="card-body">
<p>
Contenu Tab 2</p>
</div>
</div>
</div>
<div class="card tab-pane fade" id="TabContent3" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent3" >
<div class="card-header" role="tab" id="heading-TabContent3">
<h3 class="h5 mb-0">
<a data-toggle="collapse" href="#collapse-TabContent3" aria-expanded="false" aria-controls="collapse-TabContent3" class="collapsed tab-collapse">
Onglet 3
</a>
</h3>
</div>
<div id="collapse-TabContent3" class="collapse" data-parent="#TabContent3" role="tabpanel" aria-labelledby="heading-TabContent3">
<div class="card-body">
<p>
Contenu Tab 3</p>
</div>
</div>
</div>
<div class="card tab-pane fade disabled" disabled aria-disabled="true" id="TabContent4" tabindex="0" role="tabpanel" aria-labelledby="tab_TabContent4" >
<div class="card-header" role="tab" id="heading-TabContent4">
<h3 class="h5 mb-0">
<a data-toggle="collapse" aria-expanded="false" aria-controls="collapse-TabContent4" class="collapsed tab-collapse">
Onglet 4
</a>
</h3>
</div>
<div id="collapse-TabContent4" class="collapse" data-parent="#TabContent4" role="tabpanel" aria-labelledby="heading-TabContent4">
<div class="card-body">
<p>
Contenu Tab 4</p>
</div>
</div>
</div>
</div>

<nav aria-label="Pagination">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="jsp/site/Portal.jsp?page_id=6#section-pagination">
<svg class="paris-icon paris-icon-arrow-left" id="Précédent" focusable="false" >
<use xlink:href="#paris-icon-arrow-left"></use>
</svg>
</a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" title="page 1 sur 5 - active" href="jsp/site/Portal.jsp?page_id=6#section-pagination">1<span class="sr-only"> - active</span></a>
</li>
<li class="page-item" >
<a class="page-link" title="page 2 sur 5" href="jsp/site/Portal.jsp?page_id=6#section-pagination">2</a>
</li>
<li class="page-item" >
<a class="page-link cesure" title="cesure" href="jsp/site/Portal.jsp?page_id=6#section-pagination">...</a>
</li>
<li class="page-item">
<a class="page-link" href="jsp/site/Portal.jsp?page_id=6#section-pagination">
<svg class="paris-icon paris-icon-arrow-right" id="Suivant" focusable="false" >
<use xlink:href="#paris-icon-arrow-right"></use>
</svg>
</a>
</li>
</ul>
</nav>

<section class="themeparisfr-slider-wrapper" id="myslider" aria-roledescription="slide" aria-label="Liens divers" >
<div class="row themeparisfr-slider row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4" id="myslider-theme-slider" aria-live="off">
<div class="card slide" role="group" aria-roledescription="slide" aria-label="1 sur 6" >
<figure class="card-figure ">
<img src="https://picsum.photos/seed/picsum/300/300" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title 1</h3>
<p class="card-text">Content 1</p>
</div>
</div>
<div class="card slide" role="group" aria-roledescription="slide" aria-label="2 sur 6" >
<figure class="card-figure ">
<img src="https://picsum.photos/seed/picsum/300/300" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title 2</h3>
<p class="card-text">Content 2</p>
</div>
</div>
<div class="card slide" role="group" aria-roledescription="slide" aria-label="3 sur 6" >
<figure class="card-figure ">
<img src="https://picsum.photos/seed/picsum/300/300" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title 3</h3>
<p class="card-text">Content 3</p>
</div>
</div>
<div class="card slide" role="group" aria-roledescription="slide" aria-label="4 sur 6" >
<figure class="card-figure ">
<img src="https://picsum.photos/seed/picsum/300/300" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title 4</h3>
<p class="card-text">Content 4</p>
</div>
</div>
<div class="card slide" role="group" aria-roledescription="slide" aria-label="5 sur 6" >
<figure class="card-figure ">
<img src="https://picsum.photos/seed/picsum/300/300" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title 5</h3>
<p class="card-text">Content 5</p>
</div>
</div>
<div class="card slide" role="group" aria-roledescription="slide" aria-label="6 sur 6" >
<figure class="card-figure ">
<img src="https://picsum.photos/seed/picsum/300/300" class="card-img-top" alt="">
</figure>
<div class="card-body">
<h3 class="card-title ">
Title 6</h3>
<p class="card-text">Content 6</p>
</div>
</div>
</div>
<div class="slider-buttons">
<div class="container">
<div class="d-flex justify-content-end pt-4 pb-md-5 mb-md-5">
<div class="d-flex align-items-center justify-content-end gap-1 test">
<button class="btn btn-light rounded-circle disabled prev-slide" type="button"tabindex="0" aria-controls="myslider-theme-slider" aria-label="Précédent slide" disabled>
<svg class="paris-icon paris-icon-arrow-left" focusable="false" >
<use xlink:href="#paris-icon-arrow-left"></use>
</svg>
</button>
<button class="btn btn-light rounded-circle ms-sm next-slide" type="button"tabindex="0" aria-controls="myslider-theme-slider" aria-label="Suivant slide">
<svg class="paris-icon paris-icon-arrow-right" focusable="false" >
<use xlink:href="#paris-icon-arrow-right"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function (){
const _slides = $('#myslider .themeparisfr-slider'),
btnPrev = $('#myslider .slider-buttons .prev-slide'),
btnNext = $('#myslider .slider-buttons .next-slide');
_slides.focus()
let totalWidth = 0,
scrollWidth = 0,
nbSlides = 0;
_slides.children('.slide').each(function() {
totalWidth += $(this).width();
nbSlides++;
})
scrollWidth = totalWidth;
if (nbSlides > 1) {
btnPrev.on('click', function() {
_slides.animate({ scrollLeft: '-=305' }, "slow");
if (scrollWidth + 305 >= totalWidth) {
$(this).addClass('disabled').attr('disabled', 'disabled')
} else {
scrollWidth += 305
btnNext.removeClass('disabled').removeAttr('disabled')
}
}).addClass('disabled').attr('disabled', 'disabled');
btnNext.on('click', function() {
_slides.animate({ scrollLeft: '+=305' }, "slow");
if (scrollWidth <= 305) {
$(this).addClass('disabled').attr('disabled', 'disabled')
} else {
scrollWidth -= 305
btnPrev.removeClass('disabled').removeAttr('disabled')
}
}).attr('tabindex', 0);
btnPrev.attr('tabindex', 0).attr('role', 'button').keydown(function(event) {
if (event.which == 32) {
$(this).click();
event.preventDefault();
};
});
btnNext.attr('tabindex', 0).attr('role', 'button').keydown(function(event) {
if (event.which == 32) {
$(this).click();
event.preventDefault();
};
});
} else {
_slides.children('.slider-buttons .btn').remove();
}
});
</script>

<div class="status forthcoming">
<span class="status-label">A venir</span>
</div>
<div class="status tobecompleted">
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="5" fill="currentColor"/></svg>
<span class="status-label">A compléter</span>
</div>
<div class="status inprogress">
<span class="status-label">En cours</span>
</div>
<div class="status over">
<span class="status-label">Terminé</span>
</div>
<div class="status bygone">
<span class="status-label">Passé</span>
</div>
<div class="status bygone">
<span class="status-label">Fini</span>
</div>

<div class="d-none d-md-block table-responsive">
<table class="table ctable" id="table1" >
<caption class="sr-only">Tableau avec thème</caption>
<thead >
<tr >
<th scope="col" class="" id="label-1" >
Col 1<a href="urlname?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-2" >
Col 2<a href="urlname?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-3" >
Col 3<a href="urlname?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-4" >
Col 4<a href="urlname?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-5" >
Col 5<a href="urlname?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-6" >
Col 6<a href="urlname?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="text-right" id="label-7" >
Col 7<a href="test?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
</tr>
</thead>
<tbody >
<tr >
<td>
<span>Row 1 - Col 1</span>
</td>
<td>
<span>Row 1 - Col 2</span>
</td>
<td>
<span>Row 1 - Col 3</span>
</td>
<td>
<span>Row 1 - Col 4</span>
</td>
<td>
<span>Row 1 - Col 5</span>
</td>
<td>
<span>Row 1 - Col 6</span>
</td>
<td class="text-right">
<span>1234</span>
</td>
</tr>
<tr >
<td>
<span>Row 2 - Col 1</span>
</td>
<td>
<span>Row 2 - Col 2</span>
</td>
<td>
<span>Row 2 - Col 3</span>
</td>
<td>
<span>Row 2 - Col 4</span>
</td>
<td>
<span>Row 2 - Col 5</span>
</td>
<td>
<span>Row 2 - Col 6</span>
</td>
<td class="text-right">
<span>1234</span>
</td>
</tr>
<tr >
<td>
<span>Row 3 - Col 1</span>
</td>
<td>
<span>Row 3 - Col 2</span>
</td>
<td>
<span>Row 3 - Col 3</span>
</td>
<td>
<span>Row 3 - Col 4</span>
</td>
<td>
<span>Row 3 - Col 5</span>
</td>
<td>
<span>Row 3 - Col 6</span>
</td>
<td class="text-right">
<span>1234</span>
</td>
</tr>
<tr >
<td>
<span>Row 4 - Col 1</span>
</td>
<td>
<span>Row 4 - Col 2</span>
</td>
<td>
<span>Row 4 - Col 3</span>
</td>
<td>
<span>Row 4 - Col 4</span>
</td>
<td>
<span>Row 4 - Col 5</span>
</td>
<td>
<span>Row 4 - Col 6</span>
</td>
<td class="text-right">
<span>1234</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-md-none" id="accordion-table-table1"></div>
<script>
$(document).ready(function() {
var tableId = "table1";
$('table#' + tableId + ' tbody tr').each(function(index) {
var $cells = $(this).find('td');
var accordionContent = '';
$cells.each(function(i) {
var headerText = $('table#' + tableId + ' thead th').eq(i).text();
var cellText = $(this).text();
accordionContent += `<p>` + headerText + `</p><p class='mb-4'><strong>` + cellText + `</strong></p>`;
});
var accordionItem = `
<div class="accordion" id="accheading` + tableId + index + `">
<div class="card " class='m-0'>
<h3 class="card-header m-0 collapsed" data-toggle="collapse" data-target="#collapseAccheading` + tableId + index + `" role="combobox" aria-expanded="false" aria-controls="collapseAccheading` + tableId + index + `">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-target="#collapseAccheading` + tableId + index + `" aria-expanded="false" aria-controls="collapseAccheading` + tableId + index + `">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccheading` + tableId + index + `">` + $cells.eq(0).text() + `</span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion btn-outline-action">
<svg class="paris-icon paris-icon-arrow-bottom btn-outline-action" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccheading` + tableId + index + `" class="m-0 collapse " role="region" aria-labelledby="headingAccheading` + tableId + index + `" data-parent="#accheading` + tableId + index + `">
<div class="card-body">
` + accordionContent + `
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-target="#collapseAccheading` + tableId + index + `" aria-expanded="false" aria-controls="collapseAccheading` + tableId + index + `">
<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>
`;
$('#accordion-table-' + tableId).append(accordionItem);
});
});
</script>
<div class="d-none d-md-block table-responsive">
<table class="table ctable" id="table2" >
<caption class="sr-only">Tableau avec thème</caption>
<thead >
<tr >
<th scope="col" class="" id="label-1" >
Col 1 Tableau 2<a href="urlname?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
<th scope="col" class="" id="label-7" >
Col 2<a href="test?sorted_attribute_name=attrname&amp;asc_sort=false#sort_attrname" title="Tri décroissant" class="text-decoration-none" role="button">
<svg class="paris-icon paris-icon-arrow-down main-color" focusable="false" >
<use xlink:href="#paris-icon-arrow-down"></use>
</svg>
</a>
</th>
</tr>
</thead>
<tbody >
<tr >
<td>
<span>Row 1 - Col 1 - Tableau 2</span>
</td>
<td>
<span>Row 1 - Col 2 - Tableau 2</span>
</td>
</tr>
<tr >
<td>
<span>Row 2 - Col 1 - Tableau 2</span>
</td>
<td>
<span>Row 2 - Col 2 - Tableau 2</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="d-md-none" id="accordion-table-table2"></div>
<script>
$(document).ready(function() {
var tableId = "table2";
$('table#' + tableId + ' tbody tr').each(function(index) {
var $cells = $(this).find('td');
var accordionContent = '';
$cells.each(function(i) {
var headerText = $('table#' + tableId + ' thead th').eq(i).text();
var cellText = $(this).text();
accordionContent += `<p>` + headerText + `</p><p class='mb-4'><strong>` + cellText + `</strong></p>`;
});
var accordionItem = `
<div class="accordion" id="accheading` + tableId + index + `">
<div class="card " class='m-0'>
<h3 class="card-header m-0 collapsed" data-toggle="collapse" data-target="#collapseAccheading` + tableId + index + `" role="combobox" aria-expanded="false" aria-controls="collapseAccheading` + tableId + index + `">
<button class="btn btn-link btn-block btn-header-accordion" type="button" data-toggle="collapse" data-show-label="Voir le détail" data-hide-label="Masquer le détail" data-target="#collapseAccheading` + tableId + index + `" aria-expanded="false" aria-controls="collapseAccheading` + tableId + index + `">
<span class="d-flex flex-column flex-1">
<span class="card-title d-block" id="headingAccheading` + tableId + index + `">` + $cells.eq(0).text() + `</span>
</span>
<span class="accordion-toggle">
<span class="btn-label-accordion d-none d-md-inline-block"></span>
<span class="btn-accordion btn-outline-action">
<svg class="paris-icon paris-icon-arrow-bottom btn-outline-action" focusable="false" >
<use xlink:href="#paris-icon-arrow-bottom"></use>
</svg>
</span>
</span>
</button>
</h3>
<div id="collapseAccheading` + tableId + index + `" class="m-0 collapse " role="region" aria-labelledby="headingAccheading` + tableId + index + `" data-parent="#accheading` + tableId + index + `">
<div class="card-body">
` + accordionContent + `
</div>
</div>
<div class="card-footer d-block d-sm-none text-center">
<button class="btn btn-link btn-accordion" type="button" data-toggle="collapse" data-target="#collapseAccheading` + tableId + index + `" aria-expanded="false" aria-controls="collapseAccheading` + tableId + index + `">
<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>
`;
$('#accordion-table-' + tableId).append(accordionItem);
});
});
</script>