/*
 * Pages de texte : conditions, mentions, confidentialite, livraison, aide,
 * professionnels, contact, showroom.
 * ---------------------------------------------------------------------------
 * Trois corrections, et rien de plus. Aucune couleur nouvelle, aucune police
 * nouvelle, aucun composant nouveau : les jetons de la charte sont repris tels
 * quels, et la mise en page enregistree dans Elementor n'est pas refaite.
 */

.rn-editorial {

	/*
	 * La mesure : la largeur au-dela de laquelle l'oeil perd sa ligne au
	 * retour. Soixante-douze signes, dans la fourchette de quarante-cinq a
	 * soixante-quinze tenue en typographie. A la taille de texte du site,
	 * cela fait environ 640 pixels au lieu des 1 120 servis jusqu'ici.
	 */
	--rn-mesure: 72ch;

	/* Une page de conseils ou d'accueil respire plus large qu'un texte de loi. */
	--rn-mesure-large: 92ch;
}

/* -------------------------------------------------------------------------
 * 1. LES COLONNES VIDES
 *
 * Elementor marque d'une classe la colonne qui contient quelque chose. Celle
 * qui n'a rien reste dans le flux et prend sa moitie de page. On la retire, et
 * sa voisine reprend la largeur laissee libre.
 * ------------------------------------------------------------------------- */

.rn-editorial .post-content .elementor-column > .elementor-widget-wrap:not(.elementor-element-populated) {
	display: none;
}

.rn-editorial .post-content .elementor-column:not(:only-child):has( > .elementor-widget-wrap:not(.elementor-element-populated) ) {
	display: none;
}

.rn-editorial .post-content .elementor-container:has( > .elementor-column > .elementor-widget-wrap:not(.elementor-element-populated) ) > .elementor-column.elementor-col-50 {
	width: 100%;
}

/*
 * Meme chose pour les conteneurs souples, qui ont remplace les colonnes dans
 * les versions recentes : un conteneur sans widget ne merite pas la moitie de
 * la page. C'est le cas de la colonne de droite de la FAQ, un cadre gris de
 * quarante-huit pixels de haut et de six cent quatre-vingt-huit de large.
 */
.rn-editorial .post-content .e-con-inner > .e-con:not(:only-child):not(:has(.elementor-widget)) {
	display: none;
}

/*
 * Retirer la colonne vide ne suffit pas : celle qui reste garde la moitie de
 * largeur qu'Elementor lui a fixee, et le vide se deplace simplement a droite.
 *
 * On ne peut pas ecrire cette condition en une seule regle : imbriquer un
 * :has() dans un autre :has() n'est pas reconnu par tous les navigateurs, et
 * une regle invalide est une regle ignoree. On passe donc par la souplesse du
 * conteneur : chaque colonne qui porte un widget demande toute la ligne, et
 * c'est le partage souple qui tranche. Quand il y en a deux, elles se
 * repartissent la ligne comme avant ; quand la seconde a disparu, la premiere
 * prend tout.
 */
.rn-editorial .post-content .e-con-inner > .e-con:has(.elementor-widget) {
	--width: 100%;
	flex-grow: 1;
}

/* -------------------------------------------------------------------------
 * 2. LA LONGUEUR DE LIGNE
 *
 * Sur les quatre pages de texte long, la colonne de lecture est bornee et
 * centree. Les tableaux, les images et les blocs de boutons gardent la largeur
 * qu'on leur a donnee : seule la matiere qui se lit ligne a ligne est bornee.
 * ------------------------------------------------------------------------- */

.rn-editorial-long .post-content p,
.rn-editorial-long .post-content ul,
.rn-editorial-long .post-content ol,
.rn-editorial-long .post-content h2,
.rn-editorial-long .post-content h3,
.rn-editorial-long .post-content h4,
.rn-editorial-long .post-content blockquote {
	max-width: var(--rn-mesure);
	margin-inline: auto;
}

/*
 * Un titre centre le reste, un titre aligne a gauche le reste : la colonne est
 * la meme pour les deux, seule l'alignement du texte a l'interieur change, et
 * il reste celui qu'on a choisi dans Elementor.
 */

/*
 * La colonne de lecture est posee sur le groupe de widgets, pas sur chaque
 * widget : borner les paragraphes sans borner le titre au-dessus d'eux les
 * decale l'un par rapport a l'autre, et l'on gagne une longueur de ligne pour
 * perdre un alignement. Titre, texte et listes partagent donc la meme colonne.
 */
.rn-editorial:not(.rn-editorial-long) .post-content .elementor-widget-wrap.elementor-element-populated {
	max-width: var(--rn-mesure-large);
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * 3. LE RYTHME VERTICAL
 *
 * Un titre appartient au texte qui le suit, pas a celui qui le precede : il
 * respire plus au-dessus qu'en dessous. C'est ce qui fait lire une page de
 * conditions generales comme une suite d'articles plutot que comme un mur.
 * ------------------------------------------------------------------------- */

.rn-editorial-long .post-content h2 {
	margin-top: 2.4em;
	margin-bottom: 0.6em;
}

.rn-editorial-long .post-content h3,
.rn-editorial-long .post-content h4 {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

.rn-editorial-long .post-content h2:first-child,
.rn-editorial-long .post-content h3:first-child {
	margin-top: 0;
}

.rn-editorial-long .post-content li + li {
	margin-top: 0.35em;
}

/* -------------------------------------------------------------------------
 * 4. LE TELEPHONE ET LE COURRIEL
 *
 * Ces pages donnent quatre numeros et quatre adresses. Ils sont ecrits en
 * texte simple : sur telephone, un numero qu'on ne peut pas appeler d'un
 * doigt est un numero qu'on recopie de tete. La transformation en lien est
 * faite en PHP ; ici on lui donne l'aspect des autres liens du site, sans le
 * soulignement permanent qui hacherait un paragraphe.
 */

.rn-editorial .post-content a[href^="tel:"],
.rn-editorial .post-content a[href^="mailto:"] {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--rn-corail, #FD604F);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.rn-editorial .post-content a[href^="tel:"]:hover,
.rn-editorial .post-content a[href^="mailto:"]:hover,
.rn-editorial .post-content a[href^="tel:"]:focus-visible,
.rn-editorial .post-content a[href^="mailto:"]:focus-visible {
	color: var(--rn-corail-texte, #C0442F);
	text-decoration-thickness: 2px;
}

/* -------------------------------------------------------------------------
 * 5. LA FAQ
 *
 * L'accordeon reprend la largeur de la colonne vide retiree plus haut, mais
 * pas toute la page : une question et sa reponse se lisent comme un texte, et
 * la meme mesure s'y applique. Le bloc est centre.
 * ------------------------------------------------------------------------- */

.page-faq .post-content .saasplate-accordion,
.rn-editorial .post-content .saasplate-accordion {
	max-width: 78ch;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * 6. TELEPHONE
 * ------------------------------------------------------------------------- */

@media (max-width: 782px) {

	.rn-editorial .post-content p,
	.rn-editorial .post-content ul,
	.rn-editorial .post-content ol {
		max-width: none;
	}

	/*
	 * En dessous de cette largeur, la colonne fait deja la mesure : la borner
	 * une seconde fois ne servirait qu'a creer des marges inutiles.
	 */
	.rn-editorial .post-content .elementor-widget-text-editor,
	.rn-editorial .post-content .saasplate-accordion {
		max-width: none;
	}
}