Le gestionnaire de consentement permet à l'utilisateur de définir ses préférences sur l'utilisation de ses données personnelles.
Documentation<div class="fr-consent-banner">
<p class="fr-h6 fr-mb-3v">À propos des cookies sur nomdusite.fr</p>
<div class="fr-consent-banner__content">
<p class="fr-text--sm">Bienvenue ! Nous utilisons des cookies pour améliorer votre expérience et les services disponibles sur ce site. Pour en savoir plus, visitez la page <a href="">Données personnelles et cookies</a>. Vous pouvez, à tout moment, avoir le contrôle sur les cookies que vous souhaitez activer.</p>
</div>
<ul class="fr-consent-banner__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
<li>
<button class="fr-btn">
Tout accepter
</button>
</li>
<li>
<button class="fr-btn fr-btn">
Tout refuser
</button>
</li>
<li>
<button class="fr-btn fr-btn fr-btn fr-btn--secondary" data-fr-opened="false" aria-controls="fr-consent-modal">
Personnaliser
</button>
</li>
</ul>
</div>
<dialog id="fr-consent-modal" class="fr-modal" role="dialog" aria-labelledby="fr-consent-modal-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-link--close fr-link" aria-controls="fr-consent-modal">Fermer</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-consent-modal-title" class="fr-modal__title">
Panneau de gestion des cookies
</h1>
<div class="fr-consent-manager">
<!-- Finalités -->
<div class="fr-consent-service fr-consent-manager__header">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-consent-service__title">Préférences pour tous les services. <a href="">Données personnelles et cookies</a>
</legend>
<div class="fr-consent-service__radios">
<div class="fr-radio-group">
<input type="radio" id="consent-all-accept" name="consent-all">
<label class="fr-label" for="consent-all-accept">Tout accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-all-refuse" name="consent-all">
<label class="fr-label" for="consent-all-refuse">Tout refuser
</label>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend aria-describedby="finality-0-desc" class="fr-consent-service__title">Cookies obligatoires</legend>
<div class="fr-consent-service__radios">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-0-accept" name="consent-finality-0">
<label class="fr-label" for="consent-finality-0-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input disabled="" type="radio" id="consent-finality-0-refuse" name="consent-finality-0">
<label class="fr-label" for="consent-finality-0-refuse">Refuser
</label>
</div>
</div>
<p id="finality-0-desc" class="fr-consent-service__desc">Ce site utilise des cookies nécessaires à son bon fonctionnement qui ne peuvent pas être désactivés.</p>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend aria-describedby="finality-1-desc" class="fr-consent-service__title">Nom de la finalité</legend>
<div class="fr-consent-service__radios">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-accept" name="consent-finality-1-">
<label class="fr-label" for="consent-finality-1-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-refuse" name="consent-finality-1-">
<label class="fr-label" for="consent-finality-1-refuse">Refuser
</label>
</div>
</div>
<p id="finality-1-desc" class="fr-consent-service__desc">Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.</p>
<div class="fr-consent-service__collapse">
<button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-controls="finality-1-collapse"> Voir plus de détails</button>
</div>
<div class="fr-consent-services fr-collapse" id="finality-1-collapse">
<!-- Sous finalités -->
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-consent-service__title">Sous finalité 1</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-1-accept" name="consent-finality-1-service-1">
<label class="fr-label" for="consent-finality-1-service-1-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-1-refuse" name="consent-finality-1-service-1">
<label class="fr-label" for="consent-finality-1-service-1-refuse">Refuser
</label>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-consent-service__title">Sous finalité 2</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-2-accept" name="consent-finality-1-service-2">
<label class="fr-label" for="consent-finality-1-service-2-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-2-refuse" name="consent-finality-1-service-2">
<label class="fr-label" for="consent-finality-1-service-2-refuse">Refuser
</label>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-consent-service__title">Sous finalité 3</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-3-accept" name="consent-finality-1-service-3">
<label class="fr-label" for="consent-finality-1-service-3-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-1-service-3-refuse" name="consent-finality-1-service-3">
<label class="fr-label" for="consent-finality-1-service-3-refuse">Refuser
</label>
</div>
</div>
</fieldset>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend aria-describedby="finality-2-desc" class="fr-consent-service__title">Nom de la finalité</legend>
<div class="fr-consent-service__radios">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-accept" name="consent-finality-2-">
<label class="fr-label" for="consent-finality-2-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-refuse" name="consent-finality-2-">
<label class="fr-label" for="consent-finality-2-refuse">Refuser
</label>
</div>
</div>
<p id="finality-2-desc" class="fr-consent-service__desc">Description optionnelle de la finalité, lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in suscipit nulla, et pulvinar velit.</p>
<div class="fr-consent-service__collapse">
<button class="fr-consent-service__collapse-btn" aria-expanded="false" aria-controls="finality-2-collapse"> Voir plus de détails</button>
</div>
<div class="fr-consent-services fr-collapse" id="finality-2-collapse">
<!-- Sous finalités -->
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-consent-service__title">Sous finalité 1</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-1-accept" name="consent-finality-2-service-1">
<label class="fr-label" for="consent-finality-2-service-1-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-1-refuse" name="consent-finality-2-service-1">
<label class="fr-label" for="consent-finality-2-service-1-refuse">Refuser
</label>
</div>
</div>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-consent-service__title" aria-decribedby="undefined-desc">Sous finalité 2</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-2-accept" name="consent-finality-2-service-2">
<label class="fr-label" for="consent-finality-2-service-2-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-2-refuse" name="consent-finality-2-service-2">
<label class="fr-label" for="consent-finality-2-service-2-refuse">Refuser
</label>
</div>
</div>
<p id="-desc" class="fr-consent-service__desc">Ce service utilise 3 cookies.</p>
</fieldset>
</div>
<div class="fr-consent-service">
<fieldset class="fr-fieldset fr-fieldset--inline">
<legend class="fr-consent-service__title">Sous finalité 3</legend>
<div class="fr-consent-service__radios fr-fieldset--inline">
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-3-accept" name="consent-finality-2-service-3">
<label class="fr-label" for="consent-finality-2-service-3-accept">Accepter
</label>
</div>
<div class="fr-radio-group">
<input type="radio" id="consent-finality-2-service-3-refuse" name="consent-finality-2-service-3">
<label class="fr-label" for="consent-finality-2-service-3-refuse">Refuser
</label>
</div>
</div>
</fieldset>
</div>
</div>
</fieldset>
</div>
<!-- Bouton de confirmation/fermeture -->
<ul class="fr-consent-manager__buttons fr-btns-group fr-btns-group--right fr-btns-group--inline-sm">
<li>
<button class="fr-btn" id="fr-consent-modal" title="Confirmer mes choix">
Confirmer mes choix
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
<div class="fr-consent-placeholder">
<p class="fr-h6 fr-mb-2v">**Nom du service** est désactivé</p>
<p class="fr-mb-6v">Autorisez le dépôt de cookies pour accéder à cette fonctionnalité.</p>
<button class="fr-btn" title="Autorisez le dépôt de cookies pour accéder au service **Nom du service**">
Autoriser
</button>
</div>
<div class="fr-content-media fr-content-media--lg">
<div class="fr-responsive-vid">
<div class="fr-consent-placeholder">
<p class="fr-h6 fr-mb-2v">**Nom du service** est désactivé</p>
<p class="fr-mb-6v">Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.</p>
<button class="fr-btn" title="Autoriser">
Autoriser
</button>
</div>
</div>
<div class="fr-content-media__caption">© Légende de la vidéo</div>
<div class="fr-content-media__transcription">
<a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
</div>
</div>