/*
 * Bandeau de consentement et encart des publications Instagram.
 *
 * Sixième feuille, chargée après les cinq autres : elle habille un dispositif
 * qui se pose par-dessus tout le reste, et n'a besoin de rien redéfinir.
 */

/* ==========================================================================
   Bandeau
   ==========================================================================
   Carte compacte ancrée en bas à gauche, pas un bandeau pleine largeur.

   ⚠️ Il ne recouvre pas la page et ne la bloque pas. Un dispositif qui prend
   l'écran en otage pousse à cliquer « Tout accepter » pour s'en débarrasser, ce
   qui vicie le consentement : un accord obtenu par lassitude n'est pas un
   accord. Ne pas ajouter de voile.

   En bas **à gauche** et non à droite : c'est le coin le moins disputé. À
   droite se logent les bulles d'assistance, les boutons de retour en haut de
   page et, sur mobile, le pouce de la main droite.
   ========================================================================== */

.consentement {
	position: fixed;
	bottom: var(--ir-esp-3);
	left: var(--ir-esp-3);
	z-index: 120;
	width: calc(100% - 2 * var(--ir-esp-3));
	max-width: 22rem;
	border: 1px solid var(--ir-bordure);
	border-radius: var(--ir-arrondi-carte);
	background: var(--ir-fond);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

.consentement__interieur {
	display: flex;
	flex-direction: column;
	gap: var(--ir-esp-3);
	/*
	 * Plafond de hauteur, avec défilement interne : sur un téléphone en
	 * paysage, la carte dépasserait sinon la fenêtre et ses boutons
	 * deviendraient inatteignables.
	 */
	max-height: min( 70vh, 34rem );
	padding: var(--ir-esp-3);
	padding-bottom: calc(var(--ir-esp-3) + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.consentement__titre {
	margin: 0 0 var(--ir-esp-1);
	font-size: var(--ir-t-petit);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

.consentement__texte p {
	margin: 0;
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-micro);
	line-height: 1.5;
}

.consentement__lien {
	color: var(--ir-accent);
}

/* ==========================================================================
   Les deux catégories
   ==========================================================================
   Les cases sont dans la carte, sans second écran à ouvrir. C'est ce qui rend
   le choix détaillé aussi accessible que l'acceptation globale.

   Une seule colonne : la carte est étroite, et deux colonnes y donneraient des
   descriptions de trois mots par ligne.
   ========================================================================== */

.consentement__categories {
	display: flex;
	flex-direction: column;
	gap: var(--ir-esp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.consentement__bascule {
	display: flex;
	gap: var(--ir-esp-2);
	align-items: center;
	/* La ligne entière est cliquable, pas seulement la case. */
	min-height: 2.25rem;
	cursor: pointer;
}

.consentement__bascule input {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	accent-color: var(--ir-accent-fonce);
	cursor: pointer;
}

.consentement__nom {
	font-size: var(--ir-t-micro);
	font-weight: 600;
}

.consentement__description {
	margin: 0;
	padding-left: calc(1rem + var(--ir-esp-2));
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-micro);
	line-height: 1.4;
}

/*
 * ⚠️ Dans la carte compacte, la description des catégories est masquée et le
 * nom de l'outil déposé prend sa place : « Google Analytics » et « Instagram,
 * société Meta » disent l'essentiel en trois mots, là où la phrase complète
 * doublerait la hauteur de la carte.
 *
 * Rien n'est perdu : la page de politique de cookies, liée juste au-dessus,
 * porte le détail. C'est le compromis d'une carte de 22 rem.
 */
.consentement__description {
	display: none;
}

.consentement__depose {
	margin: calc(-1 * var(--ir-esp-1)) 0 0;
	padding-left: calc(1rem + var(--ir-esp-2));
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-micro);
	line-height: 1.4;
}

/* ==========================================================================
   Les trois boutons
   ==========================================================================
   ⚠️ Même taille, même couleur, même poids pour les trois, et « Tout refuser »
   en premier. Rien ne doit pousser vers l'acceptation : ni la place, ni la
   forme, ni la couleur. Un « Tout accepter » mis en avant à côté d'un
   « Personnaliser » discret est le défaut que la CNIL sanctionne, et c'est
   aussi le plus répandu.

   Ne pas « améliorer » ce bloc en donnant du relief à l'un des trois.

   Les deux premiers se partagent une ligne, le troisième prend la suivante :
   dans 22 rem, trois boutons côte à côte donneraient des libellés coupés.
   ========================================================================== */

.consentement__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ir-esp-2);
}

.consentement__bouton {
	min-height: 2.5rem;
	padding-inline: var(--ir-esp-2);
	font-size: var(--ir-t-micro);
	text-align: center;
}

.consentement__bouton:last-child {
	grid-column: 1 / -1;
}

/* Le lien de gestion, posé par le script dans la ligne de bas de page. */
/*
 * Lien de gestion, posé par le script à côté de la mention légale.
 *
 * ⚠️ La typographie est déclarée, pas héritée.
 *
 * Le bouton portait `font: inherit`, ce qui convenait tant qu'il vivait dans le
 * paragraphe de la mention. Sorti de ce paragraphe pour ne plus se lire comme
 * la fin de la phrase, il s'est mis à hériter du corps de la page : il est
 * ressorti à la taille des liens de réseaux sociaux, alors qu'il doit rester
 * une mention discrète. Il reprend donc exactement le corps et le gris de la
 * ligne à côté de laquelle il se trouve.
 */
.site-pied__gestion {
	padding: 0;
	border: 0;
	background: none;
	color: #9a9a9a;
	font-family: inherit;
	font-size: var(--ir-t-micro);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.site-pied__gestion:hover,
.site-pied__gestion:focus {
	color: var(--ir-rose);
}

/* ==========================================================================
   Publication Instagram
   ==========================================================================
   Deux états dans la même boîte : l'encart tant que le consentement manque, la
   publication ensuite. La boîte garde le même rapport dans les deux cas, ce qui
   évite que l'article se réorganise sous les yeux du lecteur au moment où il
   accepte.

   ⚠️ Rapport plutôt que hauteur fixe, comme les bannières. Une hauteur en
   pixels serait juste sur une largeur et fausse sur toutes les autres.
   ========================================================================== */

.ig-embed {
	--ig-rapport: 10 / 11;

	position: relative;
	display: block;
	width: 100%;
	/*
	 * La moitié de la colonne de texte environ, qui fait 957 px sur un écran
	 * de 1280 : une publication Instagram est un encart, pas une illustration
	 * pleine largeur.
	 *
	 * ⚠️ Une borne en rem, pas un pourcentage. À 50 %, la publication
	 * tomberait à 175 px sur un téléphone, où elle doit au contraire occuper
	 * toute la largeur. width: 100% et une borne haute donnent les deux
	 * comportements avec une seule règle.
	 */
	max-width: 30rem;
	margin: var(--ir-rythme-bloc) auto;
	overflow: hidden;
	/*
	 * ⚠️ Pas de rapport imposé par défaut : c'est le contenu qui décide.
	 *
	 * Le rapport ne sert qu'à réserver la place de la publication avant qu'elle
	 * n'annonce sa hauteur. Appliqué en permanence, il l'imposait aussi à
	 * l'encart d'attente, qui n'a que trois lignes et un bouton à montrer : la
	 * boîte faisait 480 x 1080 px pour 200 px de contenu, centrés au milieu
	 * d'un vide.
	 *
	 * Et c'est l'encart que voient les trois quarts des visiteurs, le taux
	 * d'acceptation étant inférieur à un quart en France. Le cas courant ne
	 * doit pas hériter des contraintes du cas rare.
	 */
	aspect-ratio: auto;
	border: 1px solid var(--ir-bordure);
	border-radius: var(--ir-arrondi-carte);
	background: var(--ir-fond);
}

/*
 * Le rapport d'attente ne vaut qu'une fois l'iframe posée, c'est-à-dire après
 * acceptation : là, et là seulement, il faut tenir la place le temps que la
 * hauteur arrive, faute de quoi le texte qui suit remonterait puis
 * redescendrait sous les yeux du lecteur.
 */
.ig-embed[data-ig-affiche] {
	aspect-ratio: var(--ig-rapport);
}

/*
 * ⚠️ Le rapport vient de la mesure, pas de l'estimation, et il a été refait le
 * 25/08/2026 après le passage à l'aperçu sans légende.
 *
 * Les valeurs précédentes, 4/9 et 2/5, étaient calibrées sur l'aperçu avec
 * légende, qui montait à plus de 1 000 px. Elles réservaient donc le double de
 * la place désormais nécessaire.
 *
 * Mesuré en chargeant les aperçus comme documents et en cherchant où s'arrête
 * le contenu :
 *
 * | Largeur du cadre | Hauteur du contenu | Rapport |
 * |---|---|---|
 * | 478 px, le cadre à sa taille maximale | 527 à 530 px | 10/11 |
 * | 390 px, un téléphone | 525 px | 3/4 |
 *
 * Ce rapport n'est qu'une estimation d'attente de quelques centaines de
 * millisecondes : la hauteur exacte arrive ensuite par le message de mesure.
 * Le viser juste évite seulement une secousse à ce moment-là.
 */
@media (max-width: 30rem) {
	.ig-embed {
		--ig-rapport: 3 / 4;
	}
}

/*
 * ⚠️ Sans ces deux sélecteurs, la borne de largeur ci-dessus ne s'appliquait
 * pas et la publication prenait toute la colonne, 957 px au lieu de 480.
 *
 * `.article-contenu > figure { max-width: 100% }`, dans 03-contenus.css, pèse
 * plus lourd qu'une classe seule : une classe plus un type l'emportent sur une
 * classe. La règle vise les médias de l'article, qui ont le droit de sortir de
 * la colonne de texte ; un encart de réseau social n'en fait pas partie, mais
 * le sélecteur ne pouvait pas le savoir.
 *
 * Réglé ici plutôt que par une exception dans 03-contenus.css : la
 * présentation de l'encart reste dans un seul fichier.
 */
.article-contenu > .ig-embed,
.fiche__contenu > .ig-embed {
	max-width: 30rem;
}

/*
 * Hauteur annoncée par Instagram, posée par le script sur --ig-hauteur.
 *
 * Le rapport défini plus haut ne sert que d'attente : il tient la place avant
 * la mesure, pour que l'arrivée de la hauteur réelle ne fasse pas sauter le
 * texte autour. Une fois la mesure reçue, c'est elle qui commande, et le vide
 * sous la publication disparaît.
 */
.ig-embed[data-ig-hauteur] {
	/*
	 * Les deux pixels de filet sont ajoutés à la hauteur annoncée : le thème
	 * est en box-sizing border-box, la hauteur poserait donc le filet à
	 * l'intérieur et rognerait la dernière ligne de la publication.
	 */
	height: calc(var(--ig-hauteur) + 2px);
	aspect-ratio: auto;
}

.ig-embed__cadre {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ig-embed__encart {
	display: flex;
	/*
	 * ⚠️ Plus de height: 100%, qui n'avait de sens qu'avec le rapport imposé au
	 * conteneur. L'encart fait la hauteur de ce qu'il dit, et le conteneur suit.
	 * Le centrage vertical n'a alors plus rien à centrer, il est retiré aussi.
	 */
	flex-direction: column;
	gap: var(--ir-esp-2);
	align-items: center;
	padding: var(--ir-esp-4);
	text-align: center;
}

/*
 * ⚠️ wpautop enveloppe de paragraphes le bouton et le lien, qui sont des
 * éléments en ligne. On ne peut pas l'en empêcher sans déplacer le filtre après
 * lui, ce qui casserait le repérage des URLs restées au fil du texte. Les
 * marges de ces paragraphes sont donc annulées ici : c'est l'écart de la grille
 * qui espace l'encart, et lui seul.
 */
.ig-embed__encart p {
	margin: 0;
}

.ig-embed__titre {
	margin: 0;
	font-size: var(--ir-t-4);
	font-weight: var(--ir-w-4);
	line-height: var(--ir-lh-4);
}

.ig-embed__texte {
	margin: 0;
	max-width: 22rem;
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-petit);
	line-height: 1.5;
}

.ig-embed__bouton {
	margin-top: var(--ir-esp-2);
}

/*
 * La mention de ce qu'implique l'affichage, sous le bouton. Deux lignes, pas un
 * paragraphe : elle doit être lue avant de cliquer, ce qu'un pavé garantit de
 * ne pas être.
 */
.ig-embed__mention {
	margin: 0;
	max-width: 24rem;
	color: var(--ir-texte-doux);
	font-size: var(--ir-t-micro);
	line-height: 1.45;
}

.ig-embed__lien {
	margin-top: var(--ir-esp-1);
	color: var(--ir-accent);
	font-size: var(--ir-t-micro);
}

/*
 * Une publication déjà autorisée n'affiche plus son encart, même avant que le
 * script ait posé l'iframe : sans cette règle, l'encart clignote à chaque
 * chargement de page pour qui a accepté.
 */
.consent-reseaux .ig-embed__encart {
	display: none;
}