/* --------------------------------------------------------------------------
   Feuille des blocs de contenu ajoutes le 18 aout 2026.

   Le theme d'origine dessine ses blocs image + texte en plein ecran :
   `.flex-min-height-inner` impose 100vh et `.portfolio-content-bg-box` place
   l'image en position absolue sur la moitie de la largeur. Resultat, une
   section occupe un ecran entier meme quand elle contient trois lignes, et la
   page parait vide.

   Les blocs marques `bloc-contenu` reviennent a un flux normal : l'image
   remplit sa colonne, la section prend la hauteur de son contenu.

   Rien ici ne touche aux regles du theme : les pages non marquees gardent
   exactement leur rendu d'origine.
   -------------------------------------------------------------------------- */

.bloc-contenu .hover-img {
	position: static;
	top: auto;
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
	width: 100%;
	overflow: hidden;
}

.bloc-contenu .hover-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* Le texte justifie creuse des rivieres dans une colonne etroite, surtout en
   francais ou les mots sont longs. On ne justifie qu'en pleine largeur. */
.bloc-contenu .six-columns p.text-justify {
	text-align: left;
}

/* Les listes a deux colonnes respirent trop entre les entrees. */
.bloc-contenu-liste .six-columns.bottom-padding-40 {
	padding-bottom: 30px;
}

@media only screen and (max-width: 767px) {
	.bloc-contenu .six-columns p.text-justify {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Titre d'ouverture de section.

   `.large-title-2` est cale a `line-height: 1` : sur deux lignes, les accents
   de la ligne du bas touchent le sous-titre. On desserre, et on evite que le
   padding bas du titre s'ajoute au padding haut de la section suivante.
   -------------------------------------------------------------------------- */

.bloc-contenu-titre h2.large-title-2 {
	line-height: 1.08;
	padding-bottom: 18px;
}

.bloc-contenu-titre > div {
	padding-bottom: 30px;
}

/* Deux sections consecutives cumulent leurs marges : 90 + 90 = 180 px de vide.
   Quand un fond succede a un fond identique, on supprime la couture. */
.bloc-contenu + .bloc-contenu > div,
.bloc-contenu-titre + .bloc-contenu > div {
	padding-top: 40px;
}


/* --------------------------------------------------------------------------
   Titre d'en-tete de page.

   `.large-title-2` est fige a 65 px. Un titre porteur de mots-cles depasse
   alors la colonne et se fait couper par le bord droit -- ce qui ne se voit
   ni dans le code ni dans un compteur, seulement a l'ecran.
   -------------------------------------------------------------------------- */

.page-head .large-title-2 {
	font-size: clamp(30px, 3.1vw, 56px);
	line-height: 1.06;
	overflow-wrap: break-word;
}

/* Le surtitre doit se lire comme une etiquette, pas comme la premiere ligne du
   titre. Sans cette distinction, l'en-tete forme un pave orange de quatre
   lignes ou le mot-cle se noie. */
.page-head .medium-title.red-color {
	font-size: 15px;
	letter-spacing: .18em;
	line-height: 1.3;
	margin-bottom: 14px;
	display: block;
}

/* --------------------------------------------------------------------------
   Selecteur de langue et bandeau cookies
   --------------------------------------------------------------------------
   Le drapeau de langue est en position fixe a 20 px du bas ; le bandeau
   tarteaucitron se pose au meme endroit, sur 52 px de haut, avec un z-index
   maximal. A la premiere visite le drapeau est donc entierement recouvert et
   le clic ne l'atteint pas -- ce que ni le controle des liens ni le controle
   de rendu ne peuvent voir, puisque l'element existe bien et qu'il est
   « visible » au sens du navigateur.

   On le remonte tant que le bandeau attend une reponse, et on le laisse a sa
   place des qu'il est referme. Le navigateur qui ne connait pas `:has()`
   ignore simplement la regle : le comportement d'origine reste. */
body:has(#tarteaucitronRoot.tarteaucitronBeforeVisible) .languageChange {
    bottom: 84px;
}


/* --------------------------------------------------------------------------
   Fiche de reference (page Projets)
   --------------------------------------------------------------------------
   Une liste de definitions en deux colonnes : le nom du groupe de livrables a
   gauche, ce qu'il recouvre a droite. La grille du theme ne convenait pas ici
   -- sa colonne etroite restait vide aux trois quarts, l'identite d'un projet
   ne pesant que trois lignes. */
.fiche-reference {
    display: grid;
    grid-template-columns: minmax(8rem, 20%) 1fr;
    column-gap: 2.5rem;
    row-gap: 1.1rem;
    margin: 0;
    align-items: baseline;
}

.fiche-reference dt {
    margin: 0;
    padding-top: .15rem;
}

.fiche-reference dd {
    margin: 0;
}

/* Sous 800 px les deux colonnes se superposent : un libelle de groupe suivi
   de son texte, sans gouttiere qui mangerait la largeur utile. */
@media only screen and (max-width: 800px) {
    .fiche-reference {
        grid-template-columns: 1fr;
        row-gap: .35rem;
    }
    .fiche-reference dd {
        margin-bottom: 1.1rem;
    }
}


/* --------------------------------------------------------------------------
   Corps d'analyse
   --------------------------------------------------------------------------
   Un article se lit en continu, contrairement aux pages de service qui se
   parcourent. On lui donne une mesure de lecture -- une ligne trop longue se
   perd -- et un rythme vertical regulier entre titres et paragraphes. */
.texte-article {
    max-width: 46rem;
}

.texte-article p {
    margin-top: 0;
    margin-bottom: 1.15rem;
}

.texte-article h3:first-child,
.texte-article h4:first-child {
    padding-top: 0;
}

.texte-article ul {
    margin: 0 0 1.4rem 0;
}

.texte-article li {
    margin-bottom: .5rem;
}

.texte-article li p {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Page Realite augmentee : le logo du site, a sa taille normale
   --------------------------------------------------------------------------
   Cette page portait le logo de l'application AR au lieu de celui du site, et
   le theme lui donnait 50 px de large -- une largeur taillee pour une icone
   carree. La marque Moreau, elle, est un bandeau large : a 50 px elle serait
   illisible. On rend donc a `.logo` la largeur qu'elle a partout ailleurs. */
#arps .logo {
    width: 200px;
}