/* html{font-family: monospace;} */
html {
    background-color: #bbbbbb;
    padding: 0px;
}
/* body { */
	/* font-size: 12pt; */
	/* text-align: center; */
	/* background-color: rgb(170, 171, 187); */
/* } */

/* p { */
	/* font-size: 30pt; */
/* } */

body {
    width: 80%;
    min-height: calc(100vh - 4em);
    margin: 0 auto;
    padding: 2em;
    background-color: #dddddd;
    border-color: #eeeeee;
    border-left-style: solid;
    border-right-style: solid;
    border-width: 20px;
}
p {
    color: #444444;
	text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 30pt;
    line-height: 1;
	margin: 4pt;
}

table{
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #333;
	color: #444444;
}

td {
    border: 1px solid #333;
	color: #444444;
	text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 20pt;
    line-height: 1;
    margin: 4pt;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
	text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 30pt;
    line-height: 1;
    margin: 4pt;
}


h1 {
    color: #222222;
    font-family: 'Montserrat', sans-serif;
    font-size: 600%;
    text-align: center;
    line-height: 100%;
    margin-top: 0%;
    margin-bottom: 0%;
}

h2 {
    color: #333333;
    font-family: 'Montserrat', sans-serif;
    font-size: 300%;
    line-height: 100%;
    margin-top: 1%;
    margin-bottom: 1%;
	text-align: center;
}

/* « Question 12 sur 40 » de questions.html. Cette taille etait ecrite dans
   l'attribut style du h2 jusqu'au 2026-08-08 ; un attribut style ne peut pas
   etre redefini par une media query, d'ou son deplacement ici. La valeur est
   celle d'origine : le rendu desktop est inchange. */
#question-number {
    font-size: 40px;
}

h3 {
    color: #333333;
    font-family: 'Montserrat', sans-serif;
    font-size: 200%;
    line-height: 100%;
    margin-top: 1%;
    margin-bottom: 1%;
	margin-left: 30%;
	margin-right: 30%;
	text-align: center;
}

#link_email {
	color: #222222;
    font-family: 'Montserrat', sans-serif;
	text-align: right;
	font-size: 200%;
}

i {
	font-size: 100%;
}

.left_banner {
	float: left;
}

.right_banner {
	float: right;
}

.center_image{
	text-align: center;
}

.text_image{
	width: 100px;
}

.button {
    background-color: #2196f3;
    font-family: 'Montserrat', sans-serif;
    border: none;
    border-radius: 8pt;
    color: white;
    padding: 8pt;
    width: 50%;
    min-width: 50%;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 24pt;
    margin: -2px auto;
    cursor: pointer;
}

.small_button, .small_button_off {
    background-color: #333;
    font-family: 'Montserrat', sans-serif;
    border: none;
    border-radius: 8pt;
    color: white;
    padding: 8pt;
    width: 10%;
    min-width: 100pt;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 18pt;
    margin: -2px auto;
    cursor: pointer;
}
.small_button_off {
    background-color: #ddd;
    color: #888;
    border: 2px solid #888;
    cursor: not-allowed;
    margin: -4px auto;
}

/* h1 { */
  /* font-family: 'serif'; */
/* } */

/* h2 { */
  /* font-size: large; */
  /* text-align: center; */
/* } */

/* h3 { */
  /* font-size: medium; */
/* } */


/* div { */
    /* width: 480px; */
    /* padding: 5px; */
    /* margin: 15px; */
/* } */

.resultat{
	padding: 1%;
	background: #eeeeee;
	text-align:center;
	border-radius: 16pt;
	margin-left: 8%;
	margin-right: 8%;
}

.question_text{
	color: #444444;
	text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 280%;
    line-height: 1;
    margin: 4pt;
	padding: 1%;
	background: #eeeeee;
	border-radius: 16pt;
	margin-left: 0%;
	margin-right: 0%;
}

.res_text {
    color: #444444;
    font-family: 'Roboto', sans-serif;
    font-size: 200%;
    line-height: 100%;
    margin-top: 1%;
    margin-bottom: 1%;
	margin-left: 15%;
	margin-right: 15%;
	text-align: center;
}

/* Adresses de don. Une adresse est une chaine de 42 caracteres sans espace :
   le navigateur ne peut pas la couper. Heritee du 30pt de .resultat, elle
   debordait du cadre gris (964px de texte dans 850px de cadre en 1280) et
   faisait scroller toute la page horizontalement sur mobile. D'ou le
   word-break, la police plus petite et le max-width. */
.adresse {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	font-family: monospace;
	font-size: 14pt;
	line-height: 1.4;
	word-break: break-all;
	color: #222222;
	background: #dddddd;
	border-radius: 8pt;
	padding: 6pt 10pt;
}

/* Lien de soutien Tipeee sur results.html. C'est un <a>, pas un <button> :
   .button lui va deja (display:block, text-decoration:none), il ne manque que
   la couleur et un line-height, un <a> n'ayant pas le line-height d'un bouton.
   Doit rester apres .button : meme specificite, c'est l'ordre qui tranche. */
.bouton_don {
	background-color: #e8455f;
	line-height: 1.2;
}

/* Paliers Tipeee sur results.html. text-align:left assume : une liste de prix
   centree se lit mal, les montants ne s'alignent plus entre eux. */
.paliers {
	list-style: none;
	padding: 0;
	margin: 1em auto;
	max-width: 34em;
	color: #444444;
	font-family: 'Roboto', sans-serif;
	font-size: 130%;
	line-height: 1.5;
	text-align: left;
}

.paliers li {
	margin: 0.4em 0;
}

.paliers i {
	color: #666666;
}

/* Doit rester apres .small_button : meme specificite, c'est l'ordre qui tranche. */
.bouton_copie {
	width: auto;
	min-width: 0;
	font-size: 14pt;
	padding: 6pt 16pt;
	margin: 8pt auto;
}

/* Lien de partage de results.html : l'URL affichee et son bouton « Copier »
   cote a cote. flex-wrap est le filet — si la fenetre devient trop etroite
   pour les deux, le bouton passe dessous plutot que de deborder du cadre.

   La rangee est calee sur la largeur du bouton « Soutenir sur Tipeee » juste
   en dessous, pour que les deux blocs s'alignent. Attention au calcul : .button
   est en content-box, donc sa largeur VISIBLE vaut 50% + ses deux paddings de
   8pt, pas 50%. Ecrire width:50% ici donnerait une rangee 21pt trop courte,
   visiblement decalee. Mesure a 1280px : 527px de large, de x=369 a x=896. */
.partage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8pt;
	width: calc(50% + 16pt);
	margin: 1em auto;
}

/* Meme traitement que .adresse : une URL non plus ne se coupe pas toute seule,
   et heritee du 30pt ambiant elle deborderait du cadre.
   La flex-basis courte est ce qui garde le bouton A COTE du lien a toutes les
   largeurs. Avec une base automatique, le flex decide le retour a la ligne sur
   la largeur NATURELLE des items, avant d'essayer de les retrecir : a 768px
   l'URL fait 570px a elle seule et le bouton tombait dessous. Une base de 8em
   ne declenche jamais ce retour, et le cadre grandit ensuite pour occuper tout
   ce que le bouton laisse dans la rangee.
   Pas de max-width ici : le cadre DOIT s'etirer, c'est lui qui fait que la
   rangee atteint exactement la largeur du bouton Tipeee.
   user-select:all est le vrai confort du bloc : un seul clic selectionne l'URL
   entiere, sans avoir a viser ses deux extremites. Utile quand la copie
   automatique echoue (page en http://, permission refusee). */
.lien_partage {
	flex: 1 1 8em;
	min-width: 0;
	box-sizing: border-box;
	font-family: monospace;
	/* Depuis que la rangee est calee sur .button, elle vaut 50% de la zone de
	   texte : plus l'ecran est etroit, moins il reste a l'URL une fois le
	   bouton pose. A 768px, 14pt fixes donnaient 5 lignes et un cadre de 125px
	   de haut a cote d'un bouton de 60. Le clamp fait maigrir l'URL entre
	   ~1167px (ou 1.6vw atteint 14pt) et 800px (ou il touche le plancher), ce
	   qui ramene ce cas a 3 lignes. La valeur fixe juste au-dessus est le repli
	   pour les navigateurs sans clamp ; ne pas inverser l'ordre. */
	font-size: 14pt;
	font-size: clamp(0.8rem, 1.6vw, 14pt);
	line-height: 1.4;
	text-align: center;
	word-break: break-all;
	-webkit-user-select: all;
	user-select: all;
	color: #222222;
	background: #eeeeee;
	border: 2px solid #bbbbbb;
	border-radius: 8pt;
	padding: 6pt 10pt;
}

/* Le bouton garde sa taille : c'est le lien qui absorbe la largeur. Le margin
   auto de .bouton_copie n'a plus de sens ici, l'alignement vient du flex.
   Degrade rose -> violet -> bleu, et non le #333 de .small_button : c'est
   l'action principale de la page, elle doit se voir.
   Les trois teintes sont choisies pour que le texte blanc reste lisible d'un
   bout a l'autre du degrade — contraste 4.95:1 sur le rose, 5.85 sur le
   violet, 4.84 sur le bleu, donc au-dessus des 4.5:1 exiges. Eclaircir ces
   couleurs casserait la lisibilite avant d'ameliorer quoi que ce soit.
   background-size:200% + background-position : le degrade fait deux fois la
   largeur du bouton et coulisse au survol. Rien ne bouge a l'ecran, c'est la
   couleur seule qui se decale. */
.partage .bouton_copie {
	flex: none;
	margin: 0;
	/* Meme corps et meme hauteur que le bouton Tipeee (24pt, 60px de haut) :
	   les deux se lisent comme une paire. Le padding vertical de 8pt est celui
	   de .button, c'est lui qui aligne les hauteurs. L'URL, elle, ne suit pas :
	   a 24pt elle passerait a 4 lignes et le cadre ferait 200px de haut.
	   line-height:1.2 est la valeur que .bouton_don pose sur le <a> Tipeee. Un
	   <button> retombe sinon sur line-height:normal, soit 1.146 pour la police
	   du site : 58px de haut au lieu de 60, un decalage visible cote a cote. */
	font-size: 24pt;
	line-height: 1.2;
	padding: 8pt 16pt;
	background-color: #7b2ff7;
	background-image: linear-gradient(120deg, #d81b60, #7b2ff7, #1565ff);
	background-size: 200% 100%;
	background-position: 0% 50%;
	box-shadow: 0 2px 10px rgba(123, 47, 247, 0.45);
	transition: background-position 0.4s ease, box-shadow 0.2s ease;
}

.partage .bouton_copie:hover,
.partage .bouton_copie:focus-visible {
	background-position: 100% 50%;
	box-shadow: 0 3px 14px rgba(123, 47, 247, 0.6);
}

/* Le bloc de partage n'a de sens qu'une fois la personnalite determinee ; le
   script de results.html enleve la classe. Une classe et non un attribut
   style : un attribut style ne peut pas etre redefini par une media query. */
.masque {
	display: none;
}

/* ===========================================================================
   RENDU MOBILE
   Ajoute le 2026-08-08, en meme temps que la balise <meta name="viewport"> sur
   les 26 pages. Les deux vont ENSEMBLE et ne doivent pas etre separees :

   - sans la balise, un navigateur mobile suppose un viewport de 980px et
     reduit l'echelle de toute la page. C'est le repli qui faisait tenir le
     site avant : lisible, mais minuscule au milieu de l'ecran.
   - avec la balise mais sans ce bloc, le CSS desktop s'applique tel quel a
     375px : h1 de 96px, texte de question de 44.8px, et un cadre body
     (80% + 2em de padding + 20px de bordure de chaque cote) qui reclame
     404px sur un ecran qui en fait 375. Donc debordement horizontal.

   Ce bloc ne touche que <= 700px : au-dela le rendu desktop est intact.
   Les valeurs sont en rem (base 16px) plutot qu'en % : les % se composaient
   en cascade (h1 a 600% de body) et devenaient ingerables une fois reduits.
   =========================================================================== */
@media (max-width: 700px) {

	/* Safari iOS gonfle le texte de certains blocs meme avec la balise
	   viewport (« text autosizing »). 100% desactive cette correction. */
	html {
		-webkit-text-size-adjust: 100%;
	}

	/* Le cadre gris prend tout l'ecran. border-box pour que padding et
	   bordure soient comptes DANS les 100% de large, sinon on retrouve le
	   debordement qu'on cherche a supprimer. */
	body {
		width: auto;
		padding: 0.6em;
		border-width: 0;
		box-sizing: border-box;
		min-height: 100vh;
	}

	/* overflow:hidden cree un contexte de formatage : sans lui, les deux
	   images flottantes de la banniere depassent du h1 (dont la ligne de
	   texte ne fait plus 96px de haut) et chevauchent le <hr> suivant. */
	h1 {
		font-size: min(2.3rem, 8.5vw);
		overflow: hidden;
	}

	h2 {
		font-size: 1.45rem;
	}

	h3 {
		font-size: 1.2rem;
		margin-left: 0;
		margin-right: 0;
	}

	p {
		font-size: 1.1rem;
		line-height: 1.25;
	}

	/* Taille fixee en dur dans l'attribut style de questions.html jusqu'au
	   2026-08-08 ; deplacee ici pour pouvoir etre reduite sur mobile. */
	#question-number {
		font-size: 1.45rem;
	}

	.question_text {
		font-size: 1.35rem;
		line-height: 1.2;
		padding: 0.6em;
	}

	.resultat {
		padding: 0.6em;
		margin-left: 0;
		margin-right: 0;
	}

	.res_text {
		font-size: 1.05rem;
		line-height: 1.3;
		margin-left: 0;
		margin-right: 0;
	}

	/* Les deux vignettes de la banniere font 136x102 en natif : a cette
	   taille il ne reste pas la place d'ecrire « Risitest.fr » entre elles. */
	.left_banner, .right_banner {
		width: 14vw;
		max-width: 60px;
		height: auto;
	}

	/* Filet general : aucune image ne peut depasser du cadre. */
	img {
		max-width: 100%;
	}

	/* Les images de question et de resultat portent height="200" en attribut.
	   La hauteur est conservee (c'est elle qui donne sa presence au sticker),
	   mais une image large deborderait : max-width la ramene dans le cadre et
	   object-fit:contain evite qu'elle soit ecrasee au passage. */
	img[height="200"] {
		object-fit: contain;
	}

	/* Boutons pleine largeur : plus faciles a viser au pouce. Le padding
	   vertical porte la hauteur au-dela des 44px recommandes pour une cible
	   tactile. Le margin negatif du desktop rapprochait les boutons, on ne le
	   veut pas ici. */
	.button {
		width: 100%;
		min-width: 0;
		font-size: 1.15rem;
		padding: 0.7em 0.4em;
		margin: 8px auto;
		box-sizing: border-box;
	}

	/* Les boutons sont separes par un <br> dans le HTML, herite de l'epoque ou
	   ils faisaient 50% de large et se seraient sinon suivis sur la meme ligne.
	   En pleine largeur ils sont deja l'un sous l'autre, et ce <br> ne fait plus
	   qu'ajouter une ligne vide : 22px de perdus entre chaque bouton, 87px sur
	   les 5 reponses d'une question. L'ecart vient maintenant du margin. */
	.button + br {
		display: none;
	}

	/* min-height : 44px est la hauteur minimale d'une cible tactile confortable
	   (44pt chez Apple, 48dp chez Google). Le padding seul n'y suffisait pas. */
	.small_button, .small_button_off {
		font-size: 1rem;
		min-width: 120px;
		min-height: 44px;
		padding: 0.6em 1em;
		margin: 6px auto;
	}

	/* Doit rester apres .small_button, comme sur desktop : meme specificite,
	   c'est l'ordre qui tranche. */
	.bouton_copie {
		font-size: 0.95rem;
		min-width: 0;
		padding: 0.6em 1.4em;
	}

	/* 42 caracteres monospace : a 0.8rem l'adresse tient sur une ligne dans
	   un ecran de 375px. Le word-break de la regle de base reste le filet. */
	.adresse {
		font-size: 0.8rem;
	}

	/* Sur mobile .button passe en 100% + box-sizing:border-box : la rangee de
	   partage n'a donc plus de padding a compenser, contrairement au desktop. */
	.partage {
		width: 100%;
	}

	/* L'URL reste petite : c'est elle qui absorbe le manque de place, le bouton
	   gardant le corps de .button pour rester une paire avec Tipeee. Le
	   word-break de la regle de base fait la coupure. */
	.lien_partage {
		font-size: 0.8rem;
	}

	/* Doit etre repete ici : la regle desktop .partage .bouton_copie l'emporte
	   sur le .bouton_copie du bloc mobile, qui a une specificite plus faible.
	   Corps et padding vertical de .button version mobile, donc meme hauteur. */
	.partage .bouton_copie {
		font-size: 1.15rem;
		padding: 0.7em 1.4em;
	}

	.paliers {
		font-size: 1rem;
	}

	/* Les deux tableaux d'index.html font 5 colonnes de noms longs. Reduire
	   la police ne suffit pas : « Personnalites » ou « semi-autiste » ne se
	   coupent pas tout seuls et elargissent le tableau au-dela de l'ecran.
	   overflow-wrap:anywhere autorise la coupure, le tableau tient alors dans
	   la largeur et c'est la page entiere qui evite le scroll horizontal. */
	/* table-layout:fixed force des colonnes de largeur egale. En repartition
	   automatique le navigateur donnait 40px a la premiere colonne et 98 a la
	   deuxieme, selon la longueur des noms : illisible. */
	table {
		width: 100%;
		max-width: 100%;
		table-layout: fixed;
	}

	td {
		font-size: 0.8rem;
		padding: 4px 2px;
		overflow-wrap: anywhere;
	}

	thead, tfoot {
		font-size: 1rem;
	}

	.text_image {
		width: 60px;
	}

	/* Aligne a droite sur desktop ; centre, c'est un pied de page normal. */
	#link_email {
		font-size: 0.95rem;
		text-align: center;
	}

	/* -----------------------------------------------------------------------
	   PAGE DE QUESTION : TIENT DANS UN ECRAN, SANS DEFILEMENT
	   Seule questions.html porte la classe page_question. Une question par
	   ecran se lit et se repond sans jamais faire defiler ; c'est 40 fois de
	   suite, donc ca compte.

	   svh et non vh. vh vaut la hauteur du viewport BARRES MASQUEES : sur iOS
	   c'est plus que ce qu'on voit tant que la barre d'adresse est la, donc
	   100vh deborde toujours au premier ecran. svh est la hauteur barres
	   affichees, c'est-a-dire le pire cas. Le 100vh au-dessus reste comme
	   repli pour les navigateurs d'avant 2022 : ils defileront comme avant,
	   ce qui est le comportement d'origine, pas une regression.

	   Les tailles fixes sont en clamp(..., Nsvh, ...) : sur un ecran court
	   (iPhone SE) tout le mobilier maigrit tout seul pour laisser de la place
	   a l'image. Sur un navigateur sans svh, la declaration entiere est
	   invalide et la valeur de base juste au-dessus s'applique.

	   Pas d'overflow:hidden : si un cas non prevu debordait malgre tout,
	   mieux vaut pouvoir defiler que se retrouver avec un bouton de reponse
	   inatteignable.
	   ----------------------------------------------------------------------- */
	.page_question {
		height: 100vh;
		height: 100svh;
		/* annule le min-height:100vh de la regle body ci-dessus : combine a
		   height:100svh il forcerait la page a depasser l'ecran visible. */
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: 0.4em;
	}

	/* Les <br> deviendraient des items flex a part entiere. */
	.page_question > br {
		display: none;
	}

	/* Tout ce qui n'est pas l'image garde sa taille : seule l'image absorbe
	   la difference entre deux modeles de telephone. */
	.page_question > h1,
	.page_question > hr,
	.page_question > h2,
	.page_question > .question_text,
	.page_question > .button,
	.page_question > .small_button,
	.page_question > .small_button_off {
		flex: none;
	}

	.page_question > h1 {
		font-size: min(1.8rem, 6vw);
	}

	.page_question .left_banner, .page_question .right_banner {
		width: 11vw;
		max-width: 44px;
	}

	.page_question > hr {
		margin: 0.25em 0;
	}

	/* Le <p> qui porte l'image est le seul item extensible : il prend ce qui
	   reste, et l'image se centre dedans. min-height:0 est indispensable, un
	   item flex refuse par defaut de descendre sous sa taille de contenu. */
	.page_question > p {
		flex: 1 1 0;
		min-height: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* max-height : les sources font environ 136x102, le desktop les affiche
	   deja a 200 de haut. Au-dela l'agrandissement se voit. Le reste de la
	   place devient de l'air autour de l'image. */
	.page_question #main_image {
		height: 100%;
		width: auto;
		max-width: 100%;
		max-height: 220px;
		object-fit: contain;
	}

	.page_question > #question-number {
		font-size: clamp(1rem, 2.5svh, 1.4rem);
		margin: 0.15em 0;
	}

	.page_question > .question_text {
		font-size: clamp(0.95rem, 2.5svh, 1.3rem);
		padding: 0.4em;
		margin: 0.15em 0;
	}

	/* Le padding vise haut volontairement. L'image est le seul item extensible
	   et elle est plafonnee : tout ce que les boutons ne prennent pas devient
	   de l'air autour d'elle. Autant que ce soit de la surface tactile — on
	   tape 40 fois de suite la-dessus. Le plancher a 0.3em reste pour les
	   ecrans vraiment courts, ou il n'y a plus rien a redistribuer. */
	.page_question > .button {
		font-size: clamp(0.85rem, 2.3svh, 1.1rem);
		padding: clamp(0.3em, 1.9svh, 0.85em) 0.4em;
		margin: clamp(2px, 0.55svh, 6px) auto;
	}

	.page_question > .small_button,
	.page_question > .small_button_off {
		font-size: clamp(0.8rem, 2svh, 1rem);
		min-height: 0;
		padding: clamp(0.3em, 1.2svh, 0.6em) 1em;
		margin: clamp(2px, 0.6svh, 6px) auto;
	}
}

/* ===========================================================================
   TABLETTES ET FENETRES ETROITES (701 a 1023px)
   Ce palier n'existe que pour la banniere. Avant la balise viewport, un iPad
   en portrait recevait le repli a 980px et une reduction d'echelle : ces
   largeurs n'atteignaient jamais le CSS desktop. Elles l'atteignent
   maintenant, et il ne tient pas.
   « Risitest.fr » est un mot insecable : 443px de large a 96px. Entre les deux
   vignettes de 136px il lui faut 715px, or le cadre body n'en offre que
   0.8*L - 104. En dessous de 1024px de large la vignette de droite ne trouve
   plus sa place sur la ligne, tombe sous le titre et se pose sur le <hr>
   (mesure a 768px : titre 223..666, vignette rejetee a y=128..230).
   Titre et vignettes en vw : ils maigrissent ensemble, le rapport tient sur
   toute la plage. Le reste de la page garde le rendu desktop.
   =========================================================================== */
@media (min-width: 701px) and (max-width: 1023px) {
	h1 {
		font-size: 5.5vw;
		overflow: hidden;
	}

	.left_banner, .right_banner {
		width: 11vw;
		height: auto;
	}
}