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">
<h2 class="fr-h6">À propos des cookies sur nomdusite.fr</h2>
<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" id="button-2903" title="Autoriser tous les cookies">
Tout accepter
</button>
</li>
<li>
<button class="fr-btn" id="button-2904" title="Refuser tous les cookies">
Tout refuser
</button>
</li>
<li>
<button class="fr-btn fr-btn--secondary" data-fr-opened="false" aria-controls="fr-consent-modal" id="button-2905" title="Personnaliser les cookies">
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-btn--close fr-btn" aria-controls="fr-consent-modal" id="button-2910" title="Fermer">
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">
<legend id="finality-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 aria-labelledby="finality-0-legend finality-0-desc" role="group" class="fr-fieldset">
<legend id="finality-0-legend" 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 aria-labelledby="finality-1-legend finality-1-desc" role="group" class="fr-fieldset">
<legend id="finality-1-legend" 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-describedby="finality-1-legend" 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 id="finality-1-service-1-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 aria-labelledby="finality-1-service-2-legend finality-1-service-2-desc" role="group" class="fr-fieldset fr-fieldset--inline">
<legend id="finality-1-service-2-legend" class="fr-consent-service__title" aria-describedby="finality-1-service-2-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-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>
<p id="finality-1-service-2-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 id="finality-1-service-3-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 aria-labelledby="finality-2-legend finality-2-desc" role="group" class="fr-fieldset">
<legend id="finality-2-legend" 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-describedby="finality-2-legend" 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 id="finality-2-service-1-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 aria-labelledby="finality-2-service-2-legend finality-2-service-2-desc" role="group" class="fr-fieldset fr-fieldset--inline">
<legend id="finality-2-service-2-legend" class="fr-consent-service__title" aria-describedby="finality-2-service-2-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="finality-2-service-2-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 id="finality-2-service-3-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="button-2909">
Confirmer mes choix
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
<div class="fr-consent-placeholder">
<p class="fr-h6">**Nom du service** est désactivé</p>
<p>Autorisez le dépôt de cookies pour accéder à cette fonctionnalité.</p>
<button class="fr-btn" id="button-2913" title="Autorisez le dépôt de cookies pour accéder au service **Nom du service**">
Autoriser
</button>
</div>
<figure role="group" class="fr-content-media fr-content-media--lg" id="media-2922">
<div class="fr-responsive-vid">
<div class="fr-consent-placeholder">
<p class="fr-h6">**Nom du service** est désactivé</p>
<p>Autorisez le dépôt de cookies pour accèder à cette fonctionnalité.</p>
<button class="fr-btn" id="button-2923">
Autoriser
</button>
</div>
</div>
<figcaption class="fr-content-media__caption">
Description / Source
<a class="fr-link" id="link-2924" href="[url - à modifier]">
Label lien
</a>
</figcaption>
<div class="fr-transcription" id="transcription-2915">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription-collapse-transcription-2915">Transcription</button>
<div class="fr-collapse" id="fr-transcription-collapse-transcription-2915">
<dialog id="fr-transcription-modal-transcription-2915" class="fr-modal" role="dialog" aria-labelledby="fr-transcription-modal-transcription-2915-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-btn--close fr-btn" aria-controls="fr-transcription-modal-transcription-2915" id="button-2927" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription-modal-transcription-2915-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing, <a href="https://www.systeme-de-design.gouv.fr/" target="_blank">link test</a> incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et. Diam maecenas sed enim ut. Accumsan lacus vel facilisis volutpat est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit amet consectetur adipiscing elit ut.</p>
<ul>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
<li>list item<ul>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
<li>list item niveau 2</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn--fullscreen fr-btn" aria-controls="fr-transcription-modal-transcription-2915" data-fr-opened="false" id="button-2926" title="Agrandir">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>
</figure>