/*
 * Complement a la feuille d'origine de polArt (styles.css).
 *
 * Regle du jeu : styles.css n'est JAMAIS modifie. Tout ce qui vient de
 * la reprogrammation s'ajoute ici, et chaque regle dit pourquoi elle
 * existe. On peut ainsi comparer a tout moment avec le site d'origine.
 */

/* Numero de version sur la page "about" (resources/views/pages/gabarit.blade.php) :
   .title_container (styles.css) est deja en position:relative, largeur
   fixe centree -- on s'y accroche pour placer ce numero tout a droite,
   sur la meme ligne que le titre, sans toucher a .title_container
   lui-meme (partage par toutes les pages qui utilisent ce gabarit).
   Mis en pastille orange (--contrast-color, couleur de contraste du site,
   deja utilisee pour le bouton "incitatifs" du menu) et agrandi -- demande
   explicite pour rendre le numero de version plus visible. */
.inc_version_badge {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    color: hsl(0, 0%, 100%);
    background-color: var(--contrast-color);
    padding: 8px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Meme numero de version, repris dans le pied de page de TOUTES les
   pages du site (layouts/public.blade.php) -- demande de Xavier
   (2026-10-03). Discret ici (le footer est deja charge en texte) plutot
   qu'en pastille comme sur la page "about".
   Le color:var(--vivid-color) est volontaire : styles.css met TOUS les
   <span> en bleu par defaut (regle generique "span { color: ... }"),
   illisible sur le fond anthracite du footer -- #copyright-year juste
   au-dessus s'en protege deja exactement de la meme facon. */
#footer-version {
    color: var(--neutral-xtra_light-color);
    opacity: 0.7;
}

/* Bouton "incitatifs" du menu principal (layouts/public.blade.php) :
   deplace en dernier (apres "statistiques", avec un espace) et mis en
   orange (--contrast-color) pour le distinguer du bleu standard des
   autres pastilles -- demande explicite. */
.nav_ul > div > li.nav_li_incentives {
  /* Meme espacement que tous les autres boutons du menu (marge de styles.css) :
     l'orange suffit a le distinguer, plus d'ecart supplementaire a gauche. */
  background-color: var(--contrast-color);
}

.nav_ul > div > li.nav_li_incentives:hover {
  background-color: var(--contrast-color);
  filter: brightness(0.92);
}

/* Retour de Xavier : quand "incitatifs" est la page courante, il doit se
   griser comme les autres boutons du menu (.hilite, styles.css), pas
   rester orange. Avant cette regle, .nav_li_incentives et .hilite avaient
   exactement la meme specificite (une classe sur le meme <li>) ; a
   egalite, c'est l'ordre des regles dans le CSS qui tranche, et
   .nav_li_incentives (complement.css, charge apres styles.css) gagnait
   donc toujours, meme quand .hilite s'appliquait aussi -- le bouton
   restait orange en permanence, actif ou non. En ciblant les deux classes
   a la fois (specificite superieure, sans dependre de l'ordre des
   fichiers), le gris de .hilite reprend la main uniquement quand la page
   incitatifs est active ; le bouton reste orange le reste du temps. */
.nav_ul > div > li.nav_li_incentives.hilite {
  background-color: var(--neutral-light-color);
}

/* La carte de la fiche studio garde les dimensions du cadre d'origine. */
#map.carte_osm {
  width: 470px;
  max-width: 100%;
}

/*
 * Sur l'original, .conversion flotte a droite avec margin-bottom:-200px,
 * ce qui fait remonter le cadre gris SOUS le selecteur : il se retrouve
 * dans la marge haute du cadre, au-dessus du bandeau bleu.
 * On obtient le meme resultat par la structure, sans marge negative :
 * le selecteur est place dans le cadre, sur sa propre ligne, a droite.
 * L'apparence du bloc gris et des boutons radio reste celle d'origine.
 */
/* La rangee qui porte le projet en cours et la bascule d'unites.
   Les conteneurs d'origine (.listcontainer_05, .main_table_container)
   n'ont AUCUNE marge laterale : c'est .conversion qui portait la sienne.
   En la neutralisant ici, c'est a cette rangee de tenir ses enfants a
   distance des bords, sinon les pastilles se collent au cadre. */
.bloc_unites {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 20px;
  margin: 0 0 10px;
}
.bloc_unites .conversion {
  float: none;
  clear: none;
  margin: 0;
}

/* Le site met les mots importants en bleu. Dans l'administration ce geste
   s'appelle "gras" : on lui redonne ici l'aspect d'origine, sans graisse. */
.textcontainer b,
.textcontainer strong,
.details_text_02 b,
.details_text_02 strong,
.section_body b,
.section_body strong {
    color: var(--vivid-color);
    font-weight: inherit;
}

/* Le voile des fenetres de connexion reste cache tant que le script
   n'a pas pris la main : sans cela il masque la page au chargement. */
.backdrop,
.form_container_01 {
    display: none;
}

/* Messages du site : confirmation en bleu, erreur en rouge. */
.message_bandeau,
.message_erreur {
    width: 960px;
    max-width: 100%;
    margin: 10px auto;
    padding: 10px 16px;
    border-radius: var(--main-border-radius);
    background-color: var(--neutral-xtra_light-color);
    border-left: 4px solid var(--vivid-color);
    font-size: 0.95rem;
}

.message_erreur {
    border-left-color: var(--basic_red);
    color: var(--basic_red);
}

/* Les formulaires de compte hors fenetre (profil, nouveau mot de passe). */
.formulaire_compte label {
    display: block;
    margin: 12px 0 4px;
    font-size: 0.85rem;
}

.formulaire_compte input {
    display: block;
    width: 100%;
    max-width: 420px;
    padding: 8px 10px;
    border: 1px solid var(--table-bg-color);
    border-radius: var(--main-border-radius);
}

.formulaire_compte .button_01 {
    margin-top: 18px;
}

/* Le petit mot qui confirme l'ajout au projet, en haut a droite. */
#selection_signal {
    display: none;
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 60;
    padding: 10px 16px;
    border-radius: var(--main-border-radius);
    background-color: var(--studio-color);
    color: var(--neutral-xtra_light-color);
    font-size: 0.9rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* Une case grisee doit se voir comme telle, pas passer pour decochee. */
.selection-box:disabled,
.backlot_card_input:disabled {
    cursor: not-allowed;
    opacity: .45;
}

/* L'enveloppe d'une case grisee doit rester cliquable pour pouvoir
   expliquer pourquoi elle ne repond pas. */
.case_selection {
    display: inline-block;
}

.case_selection[data-raison] {
    cursor: help;
}

/* --- Le projet en cours, a cote des cases a cocher -------------------- */

/* La ligne partage son rang avec le bouton imperial / metric : le projet
   a gauche, la bascule d'unites a droite. On ne touche pas a .conversion,
   dont la position est calee au pixel par la feuille d'origine. */
.bloc_unites {
    justify-content: space-between;
}

/* Meme fond, meme arrondi, meme calage vertical que .conversion : les
   deux se lisent comme deux boutons d'une meme rangee. */
.ligne_projet {
    position: relative;
    margin: 20px 0 0 0;
    padding: 7px 12px;
    background-color: var(--table-bg-color);
    border-radius: var(--main-border-radius);
    font-size: 0.9rem;
    line-height: 1.2;
    color: var(--neutral-medium-color);
    white-space: nowrap;
}

.ligne_projet .drop-selection {
    cursor: pointer;
}

.ligne_projet b {
    color: var(--vivid-color);
}

.ligne_projet .drop-selection:hover b {
    color: var(--contrast-color);
}

.ligne_projet .fa-caret-down {
    margin-left: 4px;
    color: var(--neutral-light-color);
}

.compteur_projet {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 2px;
    border-radius: 9px;
    background-color: var(--contrast-color);
    color: var(--neutral-xtra_light-color);
    font-size: 0.72rem;
    text-align: center;
}

/* La liste des projets, deroulee sous le nom. */
.liste_projets {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    min-width: 240px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 4px 0;
    border-radius: var(--main-border-radius);
    background-color: var(--neutral-xtra_light-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    white-space: normal;
}

.liste_projets a {
    display: block;
    padding: 7px 14px;
    font-size: 0.85rem;
    color: var(--studio-color);
}

.liste_projets a:hover {
    background-color: var(--contrast-color);
    color: var(--neutral-xtra_light-color);
}

.liste_projets_gerer {
    border-top: 1px solid var(--table-bg-color);
    font-style: italic;
}

/* Sur les pages plateau, bassin et galerie, la ligne precede la case
   "select" : elle se cale a droite comme le reste de ces pages. */
.ligne_projet + .stage_selector {
    margin-top: 8px;
}

/* Posee seule, la pastille s'aligne sur le bord gauche du contenu de la
   page (.results_container et .image_container_01 font 960 px, la largeur
   du site), donc sans retrait supplementaire. */
.results_container > .ligne_projet,
.image_container_01 > .ligne_projet {
    display: inline-block;
    margin: 0 0 10px 0;
}

#selection_signal a {
    color: var(--contrast-color);
    text-decoration: underline;
}

/* Le projet ouvert se distingue des autres dans la colonne de gauche. */
.project_group_actif {
    background-color: var(--table-bg-color);
}

.project_group_actif .selection_input {
    font-weight: bold;
    color: var(--vivid-color);
}

/* --- Statistiques ----------------------------------------------------- */

/* Le camembert : un encadre sobre, a la largeur du reste de la page.
   L'original le posait dans une boite de 35 % qui flottait sans raison. */
.bloc_camembert {
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
}

.bloc_camembert canvas {
    max-height: 320px;
}

/* Deux camemberts cote a cote dans le meme encadre (classement "pays" :
   part du monde par nombre de studios, puis par surface de plateaux) --
   demande de Xavier (2026-09-27) : "des jolis graphiques qui
   correspondent aux resultats de la stat", pour tous les classements.
   flex-wrap plutot qu'un @media dedie : les deux colonnes s'empilent
   d'elles-memes des que 260px chacune ne tient plus cote a cote. */
.chart_row_02 {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.chart_row_02 .chart_col {
    flex: 1 1 260px;
    min-width: 0;
}

/* Les trois autres classements (plateaux/surface/stages) : un graphique
   en barres horizontales, une barre par resultat -- la hauteur de
   l'encadre grandit donc avec le nombre de barres (fixee en ligne par
   statistiques/index.blade.php, proportionnelle a $combienGraphique).
   Meme habillage sobre que .bloc_camembert (encadre a la largeur de la
   page), sous un autre nom : "camembert" ne designe que les graphiques
   en secteurs. */
.bloc_graphique {
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    box-sizing: border-box;
}

.chart_canvas_wrap {
    position: relative;
    width: 100%;
}

/* Le libelle du premier champ de la recherche simple (accueil, page
 * studios) est nettement plus long en francais ("Selectionner les
 * criteres de recherche") qu'en anglais ("select search criteria").
 * Ce libelle n'a pas de largeur fixe : sa colonne se dimensionne sur
 * la longueur du texte, et reclame alors beaucoup plus de place que
 * les colonnes suivantes (pays, etat, ville, bouton), qui se
 * retrouvent collees les unes aux autres a defaut d'espace restant.
 *
 * On plafonne la largeur de la COLONNE a celle du champ texte qu'elle
 * annonce (comme en anglais), mais le libelle reste sur une seule
 * ligne (white-space: nowrap) : au-dela du plafond, le texte deborde
 * simplement de sa colonne plutot que de la forcer a s'elargir. Ce
 * debordement ne heurte rien : avec "align-items: flex-end" sur la
 * rangee, les colonnes voisines (pays, etat, ville) sont alignees par
 * le bas et laissent justement cet espace libre au-dessus de leur
 * champ, exactement la ou le libelle deborde.
 */
label[for="keyword"] {
    display: block;
    max-width: 200px;
    white-space: nowrap;
}

/* Un petit espacement minimal entre les champs de cette meme barre,
 * pour eviter qu'ils ne se retrouvent au contact les uns des autres
 * si la place venait a nouveau a manquer (traduction encore plus
 * longue, fenetre plus etroite...). Une valeur volontairement modeste
 * pour ne pas repousser le bouton "recherche" sur une deuxieme ligne.
 */
.form_container_02a {
    gap: 8px;
}

/* Les libelles du menu des statistiques, alignes comme ceux de la
   recherche de l'annuaire. */
.form_container_02a select {
    flex-basis: auto;
    width: 100%;
}

.form_container_02a select:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* --- L'annuaire : filtres et tri -------------------------------------- */

/* Le panneau de filtres n'a pas de style d'origine : il etait montre et
   cache par le script. On lui donne juste de quoi respirer. */
.criterias_visibility {
    position: relative;
    margin-bottom: 10px;
}

/* La classe .measure (l'unite affichee a cote d'un chiffre : m²/ft²,
 * bascule par public/js/unites.js) n'a pas de couleur a elle. La regle
 * generique "span { color: var(--vivid-color) }" (bleu vif, styles.css)
 * s'applique alors directement dessus, et une regle qui cible
 * directement un element gagne toujours sur l'heritage — d'ou ce bleu
 * au lieu du blanc du texte environnant dans le panneau de filtres. On
 * lui fait simplement reprendre la couleur du texte autour d'elle,
 * quel que soit ce texte (utile aussi pour le bandeau orange des
 * statistiques, qui a le meme souci).
 */
.measure {
    color: inherit;
}

/* L'en-tete de la colonne triee, et le sens du tri. */
.sort_row a {
    color: inherit;
    display: block;
}

.sort_row:hover {
    background-color: var(--vivid-hover-color);
    cursor: pointer;
}

.sort_row.active {
    background-color: var(--contrast-color);
}

.sort_row.active a::after {
    content: " \25B2";
    font-size: 0.7em;
}

.sort_row.active[data-sens="desc"] a::after {
    content: " \25BC";
}

/* Le voile "reserve aux comptes SWpro" doit couvrir le panneau, pas la
   page entiere : sa hauteur d'origine est figee a 526 px. */
.criterias_visibility .search_ui_cover {
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, .75);
}

/* La barre "search filters" : la fleche se retourne quand le panneau
   est ouvert, pour qu'on voie d'un coup d'oeil dans quel etat il est. */
#open_form {
    cursor: pointer;
}

#open_form .svg_arrow {
    transition: transform 150ms;
}

#open_form.ouvert .svg_arrow {
    transform: rotate(180deg);
}

/* --- Le panneau de filtres -------------------------------------------- */

/*
 * .search_ui_subcontainer_col_04 a "padding: 10px 0 10px 20px" : vingt
 * pixels a gauche, ZERO a droite. Ce n'est pas un oubli de polArt : dans
 * l'original, le dernier enfant de cette rangee etait la colonne
 * .in_sq_meters, large de 60 px, qui affichait la conversion en metres
 * carres et servait de marge.
 *
 * Cette colonne n'a plus lieu d'etre ici : les champs annoncent eux-memes
 * leur unite et suivent la bascule imperial / metrique. En la retirant,
 * j'ai supprime la marge de droite, et les champs gris sont venus se
 * coller au bord. On rend donc a la rangee la marge qu'elle portait.
 */
.criterias_visibility .search_ui_subcontainer_col_04 {
    padding-right: 20px;
}

/* Le picto d'information reste cale sur le bord, comme dans l'original :
   il est positionne en absolu et ignore la marge interieure. */
.criterias_visibility .search_ui_subcontainer_col_04 .picto_01 {
    right: 15px;
}

/*
 * Le triangle de la barre "search filters" (styles.css : .svg_arrow) est
 * plaque a une position ABSOLUE fixe (left: 540px), pensee pour la seule
 * largeur du texte anglais "search filters", centre dans la barre bleue.
 * Dans une autre langue -- texte plus court (allemand) ou bien plus long
 * (russe, japonais...) -- ce texte, toujours centre, ne se termine plus
 * au meme endroit : le triangle se retrouvait pose en plein milieu des
 * derniers caracteres au lieu de les suivre juste apres. On fait plutot
 * du lien #arrow lui-meme la ligne flexible qui aligne texte et triangle
 * l'un a cote de l'autre, quelle que soit la longueur du texte.
 */
#arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#arrow .svg_arrow {
    position: static;
    top: auto;
    left: auto;
}

/*
 * .form_container_04 et sa variante .shorter (styles.css) ont une hauteur
 * FIGEE (37px, 25px), pensee pour un texte anglais tenant sur une seule
 * ligne. La plupart des traductions sont plus longues et passent sur deux
 * lignes ; une hauteur figee ne grandit pas avec elles, et le texte
 * debordait alors par-dessus les cadres voisins (le bandeau gris "les
 * options ci-dessous elargiront..." empietait aussi bien sur le cadre du
 * dessus que sur celui du dessous) plutot que de rester dans son propre
 * bandeau. Une hauteur MINIMALE garde exactement le meme rendu qu'avant
 * en anglais, mais laisse le bandeau grandir quand le texte l'exige.
 */
.form_container_04 {
    height: auto;
    min-height: 37px;
}

.form_container_04.shorter {
    height: auto;
    min-height: 25px;
}

/*
 * TENTATIVE PRECEDENTE (retiree) : passer .flex_size_fixer_01/02/03 et
 * .search_number_description de largeurs FIXES (styles.css) a "width:auto
 * + min-width" pour laisser respirer les traductions plus longues. Cette
 * largeur "auto" se calcule en fait sur le contenu (max-content) de TOUTE
 * la colonne, y compris de ses propres elements internes (les <label> de
 * .search_number_description, eux-memes passes en flex-basis:auto) : les
 * deux colonnes .flex_size_fixer_03 gonflaient alors bien au-dela de
 * 392px pour loger leurs libelles sur une seule ligne, ce qui ecrasait la
 * colonne du milieu ("tanks", .search_ui_subcontainer_col_02, sans classe
 * fixer, dans la meme rangee flex-wrap:nowrap) jusqu'a ce qu'elle n'ait
 * plus la place de garder chaque case a cocher a cote de son libelle --
 * regression confirmee sur toutes les langues, y compris l'anglais. On
 * revient donc aux largeurs fixes d'origine (styles.css n'est pas touche,
 * donc il suffit de ne plus rien surcharger ici), qui donnaient le bon
 * rendu pour ces trois elements.
 */

/*
 * .search_ui_master_container button { width: 100% } (styles.css) suppose
 * un bouton seul sur sa rangee. Ici, "reset" et "update search" partagent
 * la meme rangee (.two_btn_row) : le bouton "update search" reclamait donc
 * 100% de la largeur de la rangee a lui tout seul, ecrasant le bouton
 * "reset" jusqu'a sa largeur minimale (80px, .button_01 dans styles.css) --
 * bien trop etroit des qu'un mot traduit depasse l'anglais ("reset" -> 5
 * lettres ; "réinitialiser", "zurücksetzen"...), qui semblait alors coupe
 * net, colle contre le bouton bleu juste a cote. On laisse plutot chaque
 * bouton de cette rangee prendre exactement la largeur que reclame son
 * propre texte.
 */
.two_btn_row .button_01 {
    width: auto;
    flex: 0 1 auto;
    white-space: nowrap;
    /* "button { margin: 5px auto 5px auto }" (styles.css) vise un bouton
       seul, centre par ses marges horizontales automatiques. Dans une
       rangee flex a deux boutons, ces marges "auto" absorbent tout
       l'espace libre AVANT que justify-content n'ait la main -- ca
       recentrait "update search" au lieu de le coller a droite avec
       "reset", des que la rangee est plus large que les deux boutons
       reunis (cf. .search_filters_actions ci-dessous). */
    margin: 0;
}

/*
 * "button { margin: 5px auto 5px auto }" (styles.css) ne cible que le TAG
 * <button>, jamais la classe .button_01 elle-meme -- un lien habille en
 * bouton (<a class="button_01">, ex. "subscribe again" / "discover SWpro"
 * dans comptes/profil.blade.php) ne recevait donc jamais ce centrage,
 * contrairement a un <button class="button_01"> qui rend le meme bouton
 * ailleurs sur le site. On etend ici la regle a la classe elle-meme, quel
 * que soit le tag -- sans effet sur .two_btn_row .button_01 ci-dessus, qui
 * reste prioritaire (deux classes battent une seule).
 */
.button_01 {
    margin: 5px auto 5px auto;
}

/*
 * "reset"/"update search" (studios/_filtres.blade.php) : ces deux boutons
 * vivaient dans la colonne "specialized soundstage", la plus courte des
 * trois colonnes du panneau de filtres (moins d'options que "exterior
 * shooting areas" ou "cyclorama"). Le fond gris de cette colonne s'arretait
 * donc plus tot que ses voisines, et les boutons se retrouvaient a flotter
 * seuls sur fond blanc, visuellement decolles du reste du panneau -- retour
 * de Xavier : mauvaise presentation. Desormais rangee independante, pleine
 * largeur, sous les 3 colonnes (voir le blade) : une ligne de separation
 * nette plutot qu'un vide mal defini, et les boutons alignes a droite,
 * comme des actions de fin de formulaire.
 */
.search_filters_actions {
    justify-content: flex-end;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid var(--neutral-light-color);
}

/*
 * .tank_option (studios/_filtres.blade.php, colonne "bassins"/"tanks") :
 * remplace deux essais rates sur ce meme point (voir l'historique dans le
 * blade). Le flux inline normal (case + <label>, vertical-align par
 * defaut) accroche la case a cocher a la ligne de base du label -- sa
 * DERNIERE ligne si le label en compte plusieurs (via <br> ou un
 * retour a la ligne naturel sur un mot trop long, "на открытом воздухе"
 * en russe par exemple). "vertical-align: top" essayait de compenser mais
 * se cale au ras du haut de la hauteur de ligne (line-height: 1.3rem,
 * styles.css), plus haute que le texte lui-meme -- ce qui eloignait la
 * case du texte au lieu de l'en rapprocher, y compris pour les labels
 * tenant sur une seule ligne. Une mini-rangee flex evite le probleme a la
 * racine : la case et le label sont deux blocs cote a cote, alignes par
 * le HAUT de leur boite (align-items: flex-start) plutot que par une
 * ligne de base ou une hauteur de ligne -- correct quel que soit le
 * nombre de lignes du label, dans n'importe quelle langue.
 */
.tank_option {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}

/*
 * label (styles.css) porte une marge "margin: 10px 0 3px 0" pensee pour
 * des labels de champ isoles, sans consequence pour l'alignement inline
 * d'avant (la ligne de base d'un inline-block ignore ses propres marges).
 * Mais align-items: flex-start (ci-dessus) aligne chaque enfant flex par
 * le bord de sa BOITE DE MARGE : ces 10px du haut poussaient le texte du
 * label nettement plus bas que la case (qui n'a qu'une toute petite marge
 * par defaut du navigateur), au point de donner l'impression de deux
 * lignes separees -- exactement le nouveau bug signale, y compris pour
 * "indoor"/"outdoor" seuls, jamais concernes par un retour a la ligne.
 * On neutralise cette marge ici, seulement pour ces labels-la.
 */
.tank_option label {
    display: block;
    margin: 0;
}

/*
 * .size_field_group / .size_field (studios/_filtres.blade.php) : meme
 * probleme structurel que .tank_option, ailleurs dans ce meme panneau.
 * .search_number_description (les libelles, "min. indoor tank size...")
 * et .search_number (les champs numeriques) etaient deux COLONNES
 * separees (styles.css), chacune empilant ses lignes via <br> sans lien
 * entre une ligne de l'une et la ligne correspondante de l'autre. Si un
 * libelle passe sur 2 lignes -- une traduction longue, par exemple
 * l'allemand "Mindestgröße Innenbecken (m²)" -- sa colonne grandit mais
 * pas celle des champs juste a cote : tous les champs suivants se
 * retrouvent decales par rapport a leur propre libelle (visible sur la
 * capture : les fleches montrent le champ qui ne fait plus face a son
 * texte). Comme pour les cases "bassins", chaque libelle et son champ
 * sont ici mis dans leur propre mini-rangee flex : ils restent toujours
 * l'un en face de l'autre, quel que soit le nombre de lignes du libelle,
 * et le decalage ne peut plus se propager d'une ligne a la suivante.
 */
.size_field_group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.size_field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.size_field label {
    flex: 1 1 auto;
    margin: 0;
}

.size_field input[type="number"] {
    flex: 0 0 75px;
    width: 75px;
    height: 40px;
    padding: 0 0 0 0.5rem;
    border-radius: var(--main-border-radius);
    margin: 0;
}

/* --- Annuaire : le choix entre cartes et tableau ---------------------- */

/* .list_view n'a pas de style d'origine : les deux icones etaient posees
   sans habillage. On leur en donne un, discret, aux couleurs du site. */
.list_view {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 10px;
}

.vue_bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border-radius: var(--main-border-radius);
    background-color: var(--bg-color);
    color: var(--neutral-medium-color);
    cursor: pointer;
    transition: background-color 120ms, color 120ms;
}

.vue_bouton:hover {
    background-color: var(--vivid-color);
    color: var(--neutral-xtra_light-color);
}

.vue_bouton.actif {
    background-color: var(--studio-color);
    color: var(--neutral-xtra_light-color);
}

.vue_bouton.verrouille {
    opacity: .45;
    cursor: help;
}

.vue_bouton.verrouille:hover {
    background-color: var(--bg-color);
    color: var(--neutral-medium-color);
}

/* La rangee de controles (vue cartes/tableau, titre, bascule d'unites)
   vit maintenant DANS .main_table_container, le cadre gris qui entoure
   aussi le tableau : les deux forment une seule boite, comme sur
   l'ancien site. .main_table_container n'a pas de marge laterale
   (padding: 10px 0 dans la feuille d'origine) : c'est cette rangee qui
   tient ses enfants a distance des bords, sinon ils collent au cadre. */
.barre_resultats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0 20px;
    margin: 0 0 10px;
}

.barre_resultats_titre {
    margin: 0;
}

/* Le groupe "combien affiche" + bascule d'unites + export pdf part a
   l'extreme droite de la rangee, dans cet ordre -- demande explicite :
   le menu "combien" a gauche de la bascule imperial/metrique. La marge
   auto se met sur le premier des trois (.combien_affichage) : il pousse
   tout le groupe (lui-meme et ce qui le suit dans le flux, ici
   .mesure_resultats et le bouton export) d'un seul bloc vers la droite. */
.combien_affichage {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.combien_affichage select {
    /* Meme famille de bouton que le reste de la rangee (vue_bouton,
       bascule d'unites), pour ne pas jurer avec eux : fond assorti et
       texte lisible, plutot que le select brut du navigateur. */
    background-color: var(--neutral-medium-color);
    color: var(--neutral-xtra_light-color);
    border: none;
    border-radius: var(--main-border-radius);
    padding: 6px 10px;
    font-size: 0.95rem;
    cursor: pointer;
}

.mesure_resultats .conversion {
    /* Meme neutralisation que .bloc_unites plus haut (voir en tete de
       fichier) : sur l'original .conversion flotte avec une marge
       negative pensee pour une autre page. Ici la rangee flex tient tout
       en place, .conversion garde juste son fond gris et ses boutons
       radio. */
    float: none;
    clear: none;
    margin: 0;
}

/* Un element marque "hidden" doit disparaitre, meme quand une regle lui
   donne un display. Sans cela, .flex_container_04_alt (display: flex)
   l'emporte sur l'attribut et les cartes restent affichees. */
[hidden] {
    display: none !important;
}

/* --- Les cartes ------------------------------------------------------- */

.carte_osm {
    width: 100%;
    /* La hauteur vient desormais de .carte_conteneur (voir plus bas) :
       deplacee du style inline sur #map, pour que le voile pose sur la
       carte reservee couvre exactement le meme rectangle. */
    height: 100%;
    border-radius: var(--main-border-radius);
    overflow: hidden;
    z-index: 1;
}

.carte_absente {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: var(--main-border-radius);
    background-color: var(--table-bg-color);
    color: var(--neutral-light-color);
    font-size: 0.9rem;
}

.carte_osm .leaflet-popup-content a {
    color: var(--vivid-color);
}

/* Le bouton de recadrage de la carte des resultats. */
.carte_recadrer {
    padding: 5px 10px;
    border-radius: var(--main-border-radius);
    background-color: var(--neutral-xtra_light-color);
    color: var(--studio-color);
    font-size: 0.78rem;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}

.carte_recadrer:hover {
    background-color: var(--contrast-color);
    color: var(--neutral-xtra_light-color);
}

.note_carte {
    margin: 6px 0 10px;
    font-size: 0.8rem;
    color: var(--neutral-light-color);
    text-align: right;
}

/* --------------------------------------------------------------------
   Le choix du fond de carte

   Pose en bas a gauche de chaque carte. Replie, il n'occupe qu'un petit
   bouton portant le nom du fond en cours ; deplie, il propose les six
   fonds. Le choix vaut pour toutes les cartes de la page et est retenu
   d'une visite a l'autre.
   -------------------------------------------------------------------- */

.carte_styles {
    /* column-reverse : la liste, ecrite apres le bouton, s'affiche
       AU-DESSUS de lui. Le bouton ne bouge donc pas a l'ouverture et
       rien ne deborde du bas de la carte. */
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    margin: 0 0 10px 10px;
}

.carte_styles_poignee {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 9px;
    border: 0;
    border-radius: var(--main-border-radius);
    background-color: var(--neutral-xtra_light-color);
    color: var(--studio-color);
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
}

.carte_styles_poignee:hover {
    background-color: var(--contrast-color);
    color: var(--neutral-xtra_light-color);
}

/* La petite fleche : un simple chevron, qui se retourne a l'ouverture. */
.carte_styles_fleche {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .15s;
}

.carte_styles.ouvert .carte_styles_fleche {
    transform: rotate(180deg);
}

.carte_styles_liste {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
    padding: 6px;
    border-radius: var(--main-border-radius);
    background-color: rgba(255, 255, 255, .96);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

/* La liste s'ouvre VERS LE HAUT : le bouton reste a sa place, en bas
   de la carte, et rien ne sort du cadre. */
.carte_styles.ouvert .carte_styles_liste {
    display: flex;
}

.carte_styles_liste button {
    margin: 0;
    padding: 4px 12px;
    border: 0;
    border-radius: var(--main-border-radius);
    background-color: transparent;
    color: var(--studio-color);
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s, color .12s;
}

.carte_styles_liste button:hover {
    background-color: var(--neutral-xtra_light-color);
    color: var(--contrast-color);
}

.carte_styles_liste button.actif {
    background-color: var(--studio-color);
    color: #fff;
    cursor: default;
}

/* --------------------------------------------------------------------
   Les pastilles de la carte

   Une goutte renversee dessinee en SVG dans cartes.js. L'ombre est
   posee ici, en CSS : drop-shadow epouse la silhouette du dessin, la
   ou box-shadow aurait dessine l'ombre d'un rectangle.
   -------------------------------------------------------------------- */

.point_studio {
    background: none;
    border: 0;
}

.point_studio svg {
    display: block;
    /* L'ombre est maintenant dessinee dans le SVG lui-meme (une flaque
       ovale au pied de la goutte, comme le modele) : plus de filtre CSS
       ici, il ferait une deuxieme ombre en double. */
    transition: transform .12s ease-out;
    transform-origin: 50% 85.4%;   /* pivote sur la pointe, pas sur l'ombre */
}

/* Au survol, la goutte grandit un peu sans bouger de sa pointe : on voit
   tout de suite laquelle on s'apprete a ouvrir, meme dans un amas. */
.point_studio:hover svg {
    transform: scale(1.18);
}

.point_studio:hover {
    z-index: 1000 !important;
}

/* --------------------------------------------------------------------
   Un bouton secondaire, discret : "annuler mon abonnement" ne doit pas
   attirer l'oeil autant que "save my details". styles.css n'a qu'un
   seul style de bouton (button_01, en couleur vive) ; celui-ci le
   surcharge en plus sobre sans y toucher.
   -------------------------------------------------------------------- */
.button_01.button_01--discret {
    margin-top: 10px;
    background-color: transparent;
    color: var(--neutral-light-color);
    border: 1px solid var(--neutral-xtra_light-color);
}

.button_01.button_01--discret:hover {
    background-color: var(--neutral-xtra_light-color);
    color: var(--studio-color);
}

/* --------------------------------------------------------------------
   Le selecteur de langue (resources/views/partials/_langue.blade.php)

   Un simple menu deroulant, pose dans la barre sombre du haut entre
   "admin" et le nom de la personne connectee (ou avant "sign-in" pour
   un visiteur non connecte). Meme famille de couleurs que .admin_area,
   sans fond ni bordure marques pour rester discret sur la barre foncee.
   -------------------------------------------------------------------- */
/*
 * Un <select> natif s'est revele impossible a maitriser dans Firefox sur
 * Mac : le navigateur dessine lui-meme le menu deroule (comme un menu
 * systeme) et ignore toute largeur qu'on essaie de lui donner en CSS --
 * ce n'est pas reglable, quel que soit le style qu'on lui donne.
 *
 * On construit donc ce menu a la main, sur le meme principe que le
 * choix du fond de carte (.carte_styles un peu plus haut dans ce
 * fichier) : un simple bouton dont on controle entierement la largeur,
 * et une liste qui s'ouvre en dessous. Le clic navigue vers /language/xx
 * exactement comme avant.
 */
/* .flex_container_02 (feuille d'origine) ne centre pas verticalement ses
   enfants : ça ne se voyait pas tant qu'ils etaient tous du texte de la
   meme hauteur, mais le bouton du menu de langue, un peu plus grand,
   se retrouvait visiblement plus haut que "admin" et "Xavier". */
.flex_container_02 {
    align-items: center;
}

.langue_switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Meme habillage que .admin_area (couleur, taille, curseur) : ce bouton
   doit se fondre dans la meme rangee que "admin", "Xavier", "logout",
   pas ressortir comme un element etranger. Ni bordure ni fond : juste le
   texte et la petite fleche, exactement comme ses voisins. La largeur
   fixe evite que la rangee ne bouge d'un pixel quand on change de langue --
   elargie a 78px (au lieu de 59px) pour que "Русский", le plus long des
   libelles de \App\Support\Langue::DISPONIBLES, tienne en entier sans
   etre tronque par .langue_switcher_nom (text-overflow: ellipsis). */
.langue_switcher_bouton {
    /* C'est un lien (<a>), pas un <button> : voir l'explication dans
       _langue.blade.php. Rien de plus a neutraliser ici, "a { color:
       inherit }" (styles.css) et la couleur ci-dessous suffisent. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: 78px;
    color: var(--neutral-xtra_light-color);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: inherit;
    cursor: pointer;
    transition: color 50ms;
}

.langue_switcher_bouton:hover {
    color: var(--vivid-color);
}

.langue_switcher_nom {
    /* La feuille d'origine (styles.css) donne a TOUT <span> la couleur
       "vivid" (le bleu des chiffres mis en avant sur l'accueil) : sans
       cette ligne, ce span-ci heriterait de cette regle generale au lieu
       de la couleur du bouton -- c'est exactement ce qui rendait
       "English" bleu au lieu de blanc. */
    color: inherit;
    flex: 1;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Le petit chevron, qui se retourne a l'ouverture (meme geste que
   .carte_styles_fleche). Meme remarque que ci-dessus : "color: inherit"
   pour que le triangle (dessine avec currentColor) suive la couleur du
   bouton plutot que la regle "span" generale. */
.langue_switcher_fleche {
    color: inherit;
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .15s;
}

.langue_switcher.ouvert .langue_switcher_fleche {
    transform: rotate(180deg);
}

.langue_switcher_liste {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    min-width: 130px;
    margin-top: 4px;
    padding: 4px 0;
    border-radius: var(--main-border-radius);
    background-color: var(--neutral-xtra_light-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.langue_switcher.ouvert .langue_switcher_liste {
    display: block;
}

.langue_switcher_liste a {
    display: block;
    padding: 7px 14px;
    font-size: 0.85rem;
    color: var(--studio-color);
    white-space: nowrap;
}

.langue_switcher_liste a:hover {
    background-color: var(--contrast-color);
    color: var(--neutral-xtra_light-color);
}

.langue_switcher_liste a.actif {
    font-weight: bold;
    color: var(--vivid-color);
}

/* ==========================================================================
   Incitatifs fiscaux (page /incentives)
   ========================================================================== */

/* Le CSS global du site donne a TOUT <button> "margin:5px auto 5px auto"
   (styles.css, section "1.3 Buttons"), pense pour un bouton bloc seul,
   centre dans son parent. Cette page utilise des boutons dans de
   nombreuses rangees flex (onglets, barres d'outils, export, cartes de
   simulateur...) : la marge horizontale "auto" y absorbe l'espace libre
   et ecarte les boutons les uns des autres au lieu de former des
   groupes compacts controles par le "gap"/"justify-content" de chaque
   conteneur -- symptome le plus visible sur la rangee export Excel/PDF,
   mais qui touchait en realite tous les boutons de la page. On la
   neutralise une fois pour toutes ici plutot que conteneur par
   conteneur.  Scope volontairement limite a #inc_page (et non a
   .sub_container, classe generique reutilisee par d'autres pages) pour
   ne rien changer ailleurs sur le site. */
#inc_page button {
    margin: 0;
}

.inc_kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 18px;
}

.inc_kpi {
    flex: 1 1 160px;
    padding: 14px 16px;
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    border-left: 4px solid var(--vivid-color);
}

/* Quand la barre de KPI se trouve DANS une carte de simulateur
   (.inc_sim_card, ex. le panneau "resultat" du simulateur Geneve), son
   fond gris clair (--neutral-xtra_light-color) est exactement celui de la
   carte qui l'entoure : les pastilles se fondent dans le fond et
   deviennent illisibles ("manque de couleur", signale explicitement).
   On les detache alors sur un fond blanc avec une legere ombre portee,
   comme les cartes de graphiques juste en dessous (.inc_chart_card),
   plutot que de toucher a .inc_kpi partout (la barre generale de la
   page, elle, contraste deja bien sur le fond blanc du corps de page). */
.inc_sim_card .inc_kpi {
    background-color: var(--bg-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Onglets + boutons d'export sur une seule ligne (voir .inc_toprow
   ci-dessous) : ce conteneur ne porte plus sa propre marge basse, ni son
   propre alignement a droite -- c'est .inc_toprow (flex,
   justify-content:space-between) qui les place l'un a gauche, l'autre a
   droite, a la meme hauteur. */
.inc_export_row {
    display: flex;
    gap: 10px;
    flex: none;
}

.inc_export_row .button_01 {
    font-size: 0.85rem;
    padding: 7px 14px;
}

.inc_kpi_valeur {
    display: block;
    font-family: var(--main-font-bold);
    font-size: 1.6rem;
    color: var(--studio-color);
    line-height: 1.2;
}

.inc_kpi_libelle {
    display: block;
    font-size: 0.78rem;
    color: var(--neutral-medium-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 2px;
}

/* Barre de resultats du simulateur Geneve (#ge_kpis) : demande explicite
   de reprendre les couleurs de l'original (capture fournie) -- sur les 4
   pastilles, seules 2 sont en couleur pleine dans l'original : le
   remboursement estime en vert (un gain pour le producteur) et les
   depenses eligibles en rouge (un cout) ; le taux et le plafond restent
   neutres, comme dans l'original. Scope a #ge_kpis seulement -- ce
   codage vert/rouge est propre a ce resultat-la, pas a la barre KPI
   generale de la page (liste/dashboard), qui garde son propre style. */
#ge_kpis .inc_kpi_positive,
#ge_kpis .inc_kpi_negative {
    border-left: none;
}

#ge_kpis .inc_kpi_positive {
    background-color: #4a9b57;
}

#ge_kpis .inc_kpi_negative {
    background-color: #d9483d;
}

#ge_kpis .inc_kpi_positive .inc_kpi_valeur,
#ge_kpis .inc_kpi_positive .inc_kpi_libelle,
#ge_kpis .inc_kpi_negative .inc_kpi_valeur,
#ge_kpis .inc_kpi_negative .inc_kpi_libelle {
    color: #fff;
}

/* Rangee combinee onglets + export (demande explicite : les remonter a
   la meme hauteur au lieu de deux rangees empilees). Le filet du bas,
   auparavant porte par .inc_tabs seul, passe ici pour souligner toute la
   largeur de la rangee, boutons d'export compris. */
.inc_toprow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    border-bottom: 2px solid var(--neutral-xtra_light-color);
    margin-bottom: 18px;
}

.inc_tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.inc_tab, .inc_tab_toggle {
    font-family: var(--main-font-medium);
    font-size: 0.92rem;
    color: var(--neutral-medium-color);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.inc_tab:hover, .inc_tab_toggle:hover {
    color: var(--vivid-color);
}

.inc_tab.actif, .inc_tab_toggle.actif {
    color: var(--vivid-color);
    border-bottom-color: var(--contrast-color);
    font-family: var(--main-font-bold);
}

.inc_tab_dropdown {
    position: relative;
}

.inc_dropdown_menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    /* z-index: 60 suffisait dans l'outil d'origine, dont la carte
       ("carteWrap") est un simple SVG genere en HTML, sans empilement
       propre. Ici la carte de l'onglet Carte est une vraie instance
       Leaflet, dont les panneaux internes et les controles vont jusqu'a
       z-index:1000 (voir leaflet.min.css) : un menu deroulant ouvert au
       dessus repassait donc dessous la carte et devenait illisible. On
       depasse largement cette plage plutot que de rejouer au chat et a
       la souris avec chaque futur widget Leaflet. */
    z-index: 3000;
    min-width: 220px;
    margin-top: 2px;
    padding: 6px 0;
    border-radius: var(--main-border-radius);
    background-color: var(--bg-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.inc_tab_dropdown.ouvert .inc_dropdown_menu {
    display: block;
}

.inc_dropdown_menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    font-size: 0.85rem;
    background: none;
    border: none;
    color: var(--studio-color);
    cursor: pointer;
}

.inc_dropdown_menu button:hover {
    background-color: var(--contrast-color);
    color: var(--neutral-xtra_light-color);
}

.inc_dropdown_menu button.actif {
    font-family: var(--main-font-bold);
    color: var(--vivid-color);
}

.inc_panel[hidden] {
    display: none !important;
}

.inc_toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}

.inc_toolbar input[type="text"],
.inc_toolbar select {
    padding: 7px 10px;
    border: 1px solid var(--table-bg-color);
    border-radius: var(--main-border-radius);
    font-size: 0.88rem;
}

.inc_badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-family: var(--main-font-bold);
    color: #fff;
    white-space: nowrap;
}

.inc_statut {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
}

.inc_statut-actif { background-color: hsl(130, 55%, 92%); color: hsl(130, 60%, 25%); }
.inc_statut-a_verifier { background-color: hsl(40, 90%, 92%); color: hsl(30, 80%, 30%); }
.inc_statut-suspendu { background-color: hsl(0, 70%, 94%); color: hsl(0, 60%, 40%); }

.inc_table_wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}

.inc_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.inc_table th {
    background-color: var(--studio-color);
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

/* Demande de Xavier : "studios per million inhabitants" (colonne
   _studios_m de la liste) passe sur 2 lignes plutot que d'etirer sa
   colonne en largeur -- specificite (0,0,2,1), au-dessus de ".inc_table
   th" (0,0,1,1) ci-dessus, meme famille que les autres regles inc_col_*.
   Cible par [data-key] (deja pose par renderListHead()) plutot que par
   une classe supplementaire : evite de toucher au JS pour ce seul
   changement de largeur/retour a la ligne. */
.inc_table th[data-key="_studios_m"] {
    white-space: normal;
    width: 120px;
    line-height: 1.2;
}

.inc_table th.actif {
    background-color: var(--vivid-color);
}

.inc_table th span.inc_arrow {
    margin-left: 4px;
    opacity: 0.7;
}

.inc_table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--neutral-xtra_light-color);
    white-space: nowrap;
}

.inc_table tbody tr:hover {
    background-color: var(--neutral-xtra_light-color);
}

/* Alignements demandes par Xavier pour certaines colonnes (devises,
   liste, classements) -- specificite volontairement plus forte que
   ".inc_table th"/".inc_table td" ci-dessus (classe .inc_table + type
   selecteur th/td = (0,0,1,1)) pour etre surs de gagner sans dependre de
   l'ordre des regles dans ce fichier -- meme lecon que le bug du champ
   de taux corrige juste au-dessus (une seule classe n'aurait pas suffi). */
.inc_table th.inc_col_center,
.inc_table td.inc_col_center {
    text-align: center;
}

/* Meme principe que .inc_col_center ci-dessus (specificite renforcee),
   pour les colonnes que Xavier veut justifiees a droite : le "type"
   d'incitatif de la liste (titre ET valeur, pour rester aligne l'un sur
   l'autre comme partout ailleurs). */
.inc_table th.inc_col_right,
.inc_table td.inc_col_right {
    text-align: right;
}

/* BUG CORRIGE : la colonne "zone" (pastilles) de l'onglet Devises,
   repassee a gauche sur demande de Xavier ("tu ne l'as pas fait"), ne
   bougeait PAS en enlevant simplement la classe inc_col_right -- styles.css
   (jamais modifie, voir la regle du projet) impose "td, th { text-align:
   right; }" en repli GLOBAL a TOUT le site (specificite (0,0,0,1)). Le <th>
   de cette colonne s'en sortait par hasard (".inc_table th" ci-dessus fixe
   deja explicitement "left", specificite (0,0,1,1), qui gagne) mais le
   <td>, lui, n'a AUCUNE regle a lui dans ce fichier pour "text-align" --
   donc, sans classe, il retombait exactement sur ce repli global "right" au
   lieu du "left" attendu. Meme famille de bug que le correctif du champ de
   taux Devises (voir plus haut) : une classe UNIQUE ne suffit pas partout,
   il faut au moins ".inc_table td.maclasse" pour battre a coup sur les
   regles globales de styles.css. Applique aux deux (th ET td) pour rester
   coherent avec inc_col_center/inc_col_right ci-dessus, meme si le th n'en
   avait pas strictement besoin ici. */
.inc_table th.inc_col_left,
.inc_table td.inc_col_left {
    text-align: left;
}

/* Demande de Xavier : le texte du type d'incitatif (colonne "type" de la
   liste) est ecrit un peu plus petit que le reste du tableau. */
.inc_table td.inc_col_type {
    font-size: 0.75rem;
}

/* BUG CORRIGE, prise 2 (Xavier a confirme par capture d'ecran que la
   premiere version -- ".inc_devises_taux_input { margin: 0 }", une seule
   classe -- ne suffisait pas : styles.css (jamais modifie) cible ce champ
   via "input[type='text']" (un selecteur d'ATTRIBUT + un selecteur de
   TYPE), dont la specificite CSS (0,0,1,1) est plus FORTE qu'une seule
   classe (0,0,1,0) -- il gagnait donc malgre tout, quel que soit l'ordre
   des regles dans le fichier). Cette fois le selecteur combine type +
   classe ("input.inc_devises_taux_input", specificite (0,0,1,1), a
   egalite avec celui de styles.css) ET une portee explicite par id du
   tableau parent, qui ajoute encore un point -- pour ne plus jamais avoir
   ce probleme meme si styles.css changeait un jour. Meme cause que le
   bouton "Export PDF" de la fiche detaillee (styles.css centre TOUT
   <input type="text">/<button> via une marge auto), meme remede : marge
   remise a zero. */
#inc_devises_tbody input.inc_devises_taux_input {
    margin: 0;
}

.inc_table td.inc_nom {
    white-space: normal;
    min-width: 160px;
    font-family: var(--main-font-bold);
    color: var(--studio-color);
}

.inc_charts_row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.inc_chart_card {
    flex: 1 1 320px;
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 14px 16px;
    /* Chart.js (options.maintainAspectRatio:false) fait remplir a son
       <canvas> 100% de la hauteur de SON PARENT DIRECT -- ce conteneur.
       Sans hauteur explicite ici, ce parent n'a lui-meme pas d'autre
       moyen de se dimensionner que par le contenu du canvas : boucle qui
       s'effondre a 0px dans la plupart des navigateurs (graphique
       invisible), un bug Chart.js classique. On fixe donc une hauteur
       ferme, independante du contenu, a laquelle Chart.js peut
       reellement s'accrocher. Concerne tous les graphiques de la page
       (liste, classements, dashboard, simulateur Geneve) : c'etait deja
       latent partout, juste invisible la ou l'onglet est actif des le
       chargement de la page. */
    height: 300px;
    position: relative;
    box-sizing: border-box;
}

/* Meme raison que .inc_sim_card .inc_kpi juste au-dessus : dans le
   simulateur Geneve, ces cartes de graphique sont elles aussi posees sur
   un fond .inc_sim_card de la meme couleur grise, et disparaissaient
   visuellement (aucun contour visible avant meme que Chart.js ait
   dessine quoi que ce soit). Fond blanc + ombre legere pour les detacher,
   comme les pastilles KPI. */
.inc_sim_card .inc_chart_card {
    background-color: var(--bg-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.inc_chart_card canvas {
    max-height: 100%;
}

.inc_dash_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

.inc_dash_card {
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 14px 16px;
    cursor: pointer;
}

.inc_dash_card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}

.inc_dash_card h3 {
    font-size: 0.85rem;
    color: var(--studio-color);
    margin: 0 0 10px;
}

.inc_dash_card canvas {
    max-height: 220px;
}

.inc_form_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

/* Repris de l'outil d'origine, mise en page comprise (demande explicite du
   13.09 : "je veux la meme mise en page que l'original") : les 8 rubriques
   de depenses du simulateur Geneve (salaires, production, logistique...)
   se lisent en 2 colonnes -- l'ordre naturel de GE_CATS (voir
   incitatifs.js) retombe deja exactement sur le meme appariement gauche/
   droite que l'original (salaires/production, logistique/hebergement,
   materiel/admin, postprod/assurances), donc une simple grille CSS 2
   colonnes suffit, sans reordonner quoi que ce soit cote JS. */
.inc_ge_cats_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 32px;
}

.inc_ge_cat {
    margin-bottom: 22px;
}

.inc_ge_cat_name {
    font-family: var(--main-font-bold);
    font-size: 0.95rem;
    color: var(--studio-color);
    margin-bottom: 6px;
}

/* Une ligne par sous-poste : libelle a gauche, montant a droite dans un
   champ de largeur fixe (.inc_ge_row input ci-dessous) -- comme
   l'original, au lieu de la grille "libelle au-dessus / champ en dessous"
   utilisee par le reste des formulaires de cette page (.inc_form_grid). */
.inc_ge_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
}

.inc_ge_row label {
    font-size: 0.86rem;
    color: var(--neutral-medium-color);
}

.inc_ge_row input {
    width: 130px;
    flex: none;
    /* Le CSS global du site (styles.css, "Inputs & Textareas") donne a
       TOUT <input type="text"> un display:block + margin:5px auto -- une
       regle pensee pour un champ seul dans son conteneur (elle le centre
       horizontalement). Dans une ligne flex comme celle-ci, cette marge
       automatique gauche/droite absorbe tout l'espace libre AVANT que
       justify-content n'intervienne (les marges auto sont prioritaires en
       flexbox) : le champ se retrouve centre dans l'espace restant au
       lieu d'etre colle a droite, avec un decalage qui varie selon la
       longueur du libelle -- exactement le desalignement signale. On
       neutralise cette marge heritee ici. */
    margin: 0;
    padding: 6px 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    /* Meme fond blanc que .inc_form_field input (demande explicite
       precedente : "mets du blanc dans les champs de saisie"), juste
       applique directement ici puisque ces champs ne portent plus la
       classe .inc_form_field. */
    background-color: var(--bg-color);
    color: var(--vivid-color);
    border: 1px solid var(--neutral-light-color);
    border-radius: 6px;
}

/* Ligne "Sous-total" en bas de chaque rubrique, separee par un filet en
   pointilles -- comme l'original -- avec le montant dans la couleur
   d'accent du site (--contrast-color, orange) : l'original utilisait deja
   cette meme couleur pour ce role, donc rien a changer cote palette. */
.inc_ge_subtotal_row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--neutral-light-color);
}

.inc_ge_subtotal_label {
    font-style: italic;
    font-size: 0.82rem;
    color: var(--neutral-medium-color);
}

.inc_ge_subtotal_value {
    font-family: var(--main-font-bold);
    font-size: 1.05rem;
    color: var(--contrast-color);
}

.inc_form_field label {
    display: block;
    font-size: 0.78rem;
    color: var(--neutral-medium-color);
    margin-bottom: 3px;
}

.inc_form_field input, .inc_form_field select {
    width: 100%;
    padding: 7px 9px;
    /* Le CSS global du site (styles.css, "Inputs & Textareas") donne a
       TOUS les <input>/<textarea> un fond gris tres clair
       (--neutral-xtra_light-color, 95% blanc) -- exactement la meme
       variable que le fond des cartes de simulateur (.inc_sim_card,
       juste plus haut dans ce fichier). Un champ de saisie se retrouvait
       donc rigoureusement de la meme couleur que le panneau qui
       l'entoure, avec une bordure a peine plus foncee : illisible. On
       force ici un fond blanc net et une bordure qui se voit vraiment. */
    background-color: var(--bg-color);
    color: var(--vivid-color);
    border: 1px solid var(--neutral-light-color);
    border-radius: var(--main-border-radius);
    font-size: 0.88rem;
    box-sizing: border-box;
}

/* Bug corrige : ".inc_form_field input" ci-dessus (destine aux champs
   texte/nombre/select) s'appliquait aussi aux <input type="checkbox">
   imbriques dans les libelles de case a cocher (nature d'activite,
   bonus Geneve), les etirant a width:100% -- une case a cocher devient
   alors une barre de la largeur de la ligne, avec la coche du navigateur
   rendue n'importe ou dedans. On la reborne a sa taille naturelle. */
.inc_form_field input[type="checkbox"],
.inc_form_field input[type="radio"] {
    width: 15px;
    height: 15px;
    flex: none;
    margin: 0 8px 0 0;
    vertical-align: middle;
    box-sizing: border-box;
}

/* Case a cocher + texte alignes sur une ligne, comme l'original
   (label{display:flex;gap:9px;align-items:center}) plutot que le
   display:block herite de la regle ".inc_form_field label" ci-dessus,
   qui n'a de sens que pour le libelle "chapeau" du champ (ex. "Nature
   d'activite"), pas pour chaque case a cocher individuelle. */
.inc_form_field label:has(input[type="checkbox"]),
.inc_form_field label:has(input[type="radio"]) {
    display: flex;
    align-items: center;
    margin: 6px 0;
}

/* "Nature of activity" (simulateur Geneve) : desormais 3e champ de
   .inc_form_grid, sur la meme ligne que le budget et le format -- demande
   explicite. Ses 3 cases a cocher passent en ligne (repliables) au lieu
   d'empiler une ligne par case, pour tenir dans la largeur reduite d'une
   colonne de grille plutot que sur toute la largeur de la carte. */
.inc_ge_act_row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
}

.inc_sim_card {
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}

/* Le CSS global du site (styles.css, "1.2.1 titles") donne a TOUS les
   titres h1..h6 un margin-bottom NEGATIF (-10px), pense pour la mise en
   page du site marketing. Sur cette page, applique tel quel aux titres
   de panneaux generes dynamiquement (resultat du simulateur, panneau
   pays de la carte...), il les fait chevaucher l'element juste en
   dessous -- c'est la cause du "titres qui se chevauchent" signale sur
   plusieurs onglets. On neutralise cet heritage partout ou cette page
   genere ses propres titres de panneau. */
.inc_sim_card h3, .inc_sim_card h4 {
    color: var(--studio-color);
    margin-top: 0;
    margin-bottom: 12px;
}

.inc_checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inc_checklist li {
    padding: 5px 0;
    font-size: 0.86rem;
    border-bottom: 1px solid var(--table-bg-color);
}

.inc_chip_list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.inc_chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: var(--bg-color);
    border: 1px solid var(--table-bg-color);
    font-size: 0.8rem;
}

.inc_chip button {
    background: none;
    border: none;
    color: var(--basic_red);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
}

.inc_map_container {
    height: 520px;
    border-radius: var(--main-border-radius);
    overflow: hidden;
    margin-bottom: 16px;
}

.inc_map_panel {
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 14px 16px;
    max-height: 400px;
    overflow-y: auto;
}

.inc_map_panel h3 {
    color: var(--studio-color);
    margin-top: 0;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inc_map_legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 12px;
}

.inc_map_legend_item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--neutral-medium-color);
}

.inc_map_legend_swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.inc_note {
    font-size: 0.8rem;
    color: var(--neutral-medium-color);
    margin: 6px 0 16px;
}

@media (max-width: 700px) {
    .inc_kpi { flex-basis: 100%; }
    .inc_chart_card { flex-basis: 100%; }
    .inc_ge_cats_grid { grid-template-columns: 1fr; }
}

/* Boite "incitatifs" sur la fiche studio (resources/views/studios/show.blade.php),
   pres du class rating. */

.inc_studio_title {
    margin-bottom: 12px;
}

.inc_studio_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.inc_studio_item {
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 12px 16px;
}

.inc_studio_nom {
    font-family: var(--main-font-bold);
    color: var(--contrast-color);
    font-size: 0.95rem;
}

/* Type d'incitatif : etiquette discrete (meme traitement que
   .inc_kpi_libelle sur la page /incentives), pour laisser le chiffre
   ci-dessous porter toute l'attention. */
.inc_studio_type {
    font-size: 0.78rem;
    color: var(--neutral-medium-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 4px;
}

/* Le chiffre qui compte : meme traitement que .inc_kpi_valeur, pour
   qu'il saute aux yeux au lieu de se noyer dans le meme style discret
   que le type d'incitatif juste au-dessus. */
.inc_studio_pct {
    font-family: var(--main-font-bold);
    font-size: 1.5rem;
    color: var(--studio-color);
    line-height: 1.25;
    margin-top: 2px;
}

.inc_studio_link {
    display: inline-block;
    font-size: 0.8rem;
    margin-top: 6px;
    color: var(--vivid-color);
}

.inc_studio_empty {
    font-size: 0.85rem;
    color: var(--neutral-medium-color);
    margin-bottom: 16px;
}

/* Demande explicite : le bouton "export pdf" doit toujours etre aligne
   tout a droite de la page, sur toutes les pages qui en ont un -- et sur
   la fiche studio precisement, sur la meme ligne que le badge
   "-> soundstages" (.table_anchor_trigger de styles.css, deja en
   position:absolute; right:0; top:0 dans .title_container). On regroupe
   les deux dans une rangee flex elle-meme ancree en haut a droite : ainsi
   la largeur variable du bouton selon la langue (6 locales) ne desaligne
   jamais le badge, et inversement. Utilise sur la fiche studio et sur les
   statistiques (meme .title_container), avec ou sans badge selon la page. */
.title_actions_row {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.title_actions_row h4.table_anchor_trigger {
    /* Neutralise le position:absolute individuel de styles.css : dans
       cette rangee, c'est .title_actions_row qui gere le positionnement,
       le badge redevient un simple element du flux flex. */
    position: static;
    margin: 0;
}

.title_actions_row .button_01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* button (styles.css) donne "margin: 5px auto 5px auto" a TOUT
       bouton -- une fois dans une rangee flex, cette marge horizontale
       auto revendique tout l'espace libre pour se centrer, et l'emporte
       sur justify-content. Sans overlap ici (rangee en shrink-to-fit,
       voir .title_actions_row) mais on neutralise quand meme pour ne pas
       en dependre. */
    margin: 0;
}

/* Fiche plateau / bassin exterieur (partials/_entete-installation) : le
   titre et le bouton export pdf partagent .results_container (generique,
   utilisee ailleurs sur le site pour d'autres mises en page -- on cible
   donc precisement son usage DANS .title_container_alt, propre a ce
   bandeau). padding-right laisse la place au logo du studio, deja en
   position:absolute; right:0; width:120px dans .title_studio_logo
   (styles.css), pour que le bouton ne passe jamais dessous. */
.title_container_alt .results_container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-right: 130px;
}

.title_container_alt .results_container .button_01 {
    flex: none;
    /* Meme piege que .title_actions_row ci-dessus : button (styles.css)
       met "margin: 5px auto 5px auto" sur TOUT bouton, ce qui le
       centrerait dans l'espace libre de cette rangee flex (justify-
       content: space-between n'a alors plus aucun effet). On neutralise
       la marge horizontale et on pousse explicitement a droite. */
    margin: 0 0 0 auto;
}

/* Page selection -- ancienne rangee "titre + bouton export pdf" cote a
   cote : apres plusieurs allers-retours (bouton regroupe avec la
   pastille et la bascule d'unites, essaye en haut de page, juge "moche"),
   .selection_title_row ne garde plus que le <h3> seul sur sa ligne (voir
   le second bloc .selection_title_row plus bas, qui ne style plus qu'un
   titre seul) ; le bouton export pdf est dans .title_actions_row, en
   haut de page, et la pastille + la bascule d'unites sont juste
   au-dessus des tableaux (voir .selection_content .bloc_unites plus
   bas), comme partout ailleurs sur le site. Rien a definir ici : un
   <h3> seul dans une div n'a pas besoin de flex. */

/* Menu "studios fermes" (all / without closed studios / only closed
   studios) pres des cases "film studio" / "movie ranch" -- demande
   explicite, puis amelioration demandee ensuite : "une meilleure mise
   en page" et "remonter d'une ligne ce menu".
   Deux choses corrigees au passage :
   1) Bug visuel de la 1ere version : le label reprenait la couleur
      var(--neutral-medium-color), qui est EXACTEMENT celle du fond du
      panneau (.search_ui_subcontainer_col_02) -- texte invisible, on
      croyait le label absent. Il reprend maintenant la couleur des
      autres labels du panneau (var(--neutral-xtra_light-color), meme
      regle que le "label" generique de styles.css), juste en plus
      petit pour rester discret.
   2) Le champ avait beaucoup plus d'air que les cases "film studio" /
      "movie ranch" juste au-dessus (marge de 10px + un select a la
      taille par defaut du site, haute de 40px avec 10px de padding) :
      resserre ici (marge de 3px, select plus compact) pour que le
      champ remonte sensiblement, de l'ordre d'une ligne, sans pour
      autant passer le libelle et le select sur une meme rangee -- une
      rangee horizontale rendait "without closed studios" tronque dans
      cette colonne etroite (~220px, partagee avec "Category" et
      "options" dans .search_ui_subcontainer_01). */
.closed_studios_field {
    margin-top: 3px;
}

.closed_studios_field label {
    display: block;
    font-size: 0.78rem;
    color: var(--neutral-xtra_light-color);
    margin-bottom: 2px;
}

.closed_studios_field select {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    font-size: 0.85rem;
}

/* Demande explicite de Xavier (2026-10-03) : case "only studios for
   sale" juste sous le menu "closed studios" ci-dessus -- meme respiration
   discrete (marge resserree) que ce menu, pour rester coherent dans
   cette colonne etroite. */
.for_sale_field {
    margin-top: 6px;
}

.for_sale_field label {
    font-size: 0.78rem;
    color: var(--neutral-xtra_light-color);
}

/* ------------------------------------------------------------------
   Page selection -- refonte demandee explicitement : "mettre des
   couleurs, mettre en forme, le titre de la selection beaucoup plus
   grand, bref faire un vrai boulot de mise en page pro."
   La cause du mauvais rendu d'origine : .flex_container_01 (partagee
   avec d'autres pages, jamais modifiee ici) met ses deux colonnes en
   "flex-wrap: wrap" alors que la colonne des projets (.project_list)
   fait 740px de large a elle seule -- sur une largeur de page de
   960px, la seconde colonne n'a plus la place et retombe sur la ligne
   suivante : les deux colonnes s'empilent au lieu d'etre cote a cote.
   On resout ca en scopant tout sous .selection_layout (ajoute
   uniquement sur cette page), sans toucher .flex_container_01 lui
   meme.
   Premiere version : colonne des projets a gauche, contenu a droite,
   cote a cote. Xavier a ensuite prefere que le tableau des selections
   garde toute la largeur de la page (comme sur les autres pages du
   site, ex. la fiche studio) plutot que d'etre reduit pour partager la
   ligne avec la colonne des projets -- on empile desormais les deux :
   le panneau des projets en un bloc compact tout en haut (il n'a besoin
   d'etre large ni utile de l'etre), le contenu (titre + tableaux) en
   dessous sur toute la largeur de la page. ------------------------- */
.selection_layout {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
}

.selection_sidebar {
    align-self: flex-start;
    width: 340px;
    box-sizing: border-box;
    padding: 18px 20px 20px;
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    border-top: 3px solid var(--vivid-color);
}

.selection_sidebar_header .selection_dropdown {
    margin: 0 0 4px;
    padding: 0;
    font-size: 0.72rem;
    font-weight: var(--main-font-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-light-color);
}

/* La colonne des projets passe de 740px (largeur pensee pour toute la
   page) a 100% de la sidebar de 300px -- sinon elle deborde. */
.selection_sidebar .project_list {
    width: 100%;
    background-color: var(--bg-color);
}

/* Meme raison : la case texte du nom de projet avait une largeur fixe
   de 450px (!important dans styles.css, la feuille d'origine n'est
   jamais modifiee) pensee pour l'ancienne colonne large. On la laisse
   suivre son parent, qui lui-meme s'ajuste desormais a la place
   disponible (voir .selection_sidebar .project_main_item ci-dessous). */
.selection_sidebar .selection_input {
    width: 100% !important;
    background-color: transparent !important;
    font-size: 0.85rem;
}

/* Bug visuel corrige au passage : styles.css pose un outline plein de
   50px sur cet input ("outline: var(--vivid-color) solid 50px"),
   invisible tant que la colonne fait 740px de large car le debordement
   de l'outline restait hors champ -- une fois la colonne retrecie, ce
   pate bleu plein devient visible a droite du nom de chaque projet.
   .project_main_item .selection_input (deux classes) l'emporte sur
   .project_main_item input (une classe + un type) de styles.css. */
.project_main_item .selection_input {
    outline: none;
}

/* Le nom du projet et les actions (rename/delete/open) se partagent
   desormais l'espace au lieu d'une largeur fixe de 75% / 100px pensee
   pour l'ancienne colonne de 740px : le nom prend la place disponible
   (avec ellipsis s'il est long), les actions gardent leur largeur de
   contenu sans jamais passer a la ligne. */
.selection_sidebar .project_main_item {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.selection_sidebar .project_list_sub-group {
    flex: none;
}

.selection_sidebar .project_group {
    padding: 2px 6px;
    border-radius: 4px;
}

.selection_sidebar .project_group:hover {
    background-color: var(--bg-color);
}

.selection_sidebar_footer {
    margin-top: 4px;
}

.selection_sidebar_footer .create_new_project {
    float: none;
    display: block;
    width: 100%;
    text-align: center;
    margin: 10px 0 0;
}

.selection_content {
    width: 100%;
}

/* Troisieme retour de Xavier : "c'est moche" pour la version precedente
   (tout remonte en haut de page), et la bascule imperial/metric doit
   rester "proche du tableau comme partout" -- comme sur la fiche
   studio, ou .bloc_unites (pastille de projet + bascule d'unites) est
   juste au-dessus du tableau qu'elle concerne (voir studios/show.blade.php).
   Seul le bouton export pdf reste en haut de page (.title_actions_row,
   deja definie plus haut dans ce fichier, meme motif que sur la fiche
   studio). .bloc_unites (partagee, jamais modifiee ici) porte
   "padding: 0 20px", pense pour les pages qui l'utilisent a l'interieur
   d'un tableau deja marge -- ici, dans la colonne de contenu de la
   selection, ca desalignait la pastille et la bascule du reste de la
   colonne : on remet a plat. */
.selection_content .bloc_unites {
    padding: 0;
    margin-bottom: 16px;
}

/* Le nom de la selection affichee : demande explicite "beaucoup plus
   grand", au meme traitement typographique que .page_title (gros,
   gras, majuscules, bleu) pour se lire comme un vrai titre de section
   plutot que le petit texte brut d'origine. */
.selection_title_row {
    margin-top: 6px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--contrast-color);
}

.selection_title_row .selected_selection_name {
    font-family: var(--main-font-bold);
    font-size: 2.1rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--vivid-color);
}

/* Un peu d'air et de couleur entre les cadres de resultats (soundstages
   / bassins / backlots), qui se suivaient auparavant sans aucune
   separation visuelle autre que leur propre fond gris. */
.selection_content .main_table_container {
    border-top: 3px solid var(--vivid-color);
}

/* Le contenu occupe maintenant toute la largeur de la page (960px,
   comme les autres tableaux du site) : plus besoin de retrecir
   .table_id ni de faire defiler les tableaux a 9 colonnes
   (soundstages, bassins) horizontalement -- ils tiennent nativement,
   exactement comme sur la fiche studio. On garde seulement ce petit
   filet de securite pour que le titre d'une table ("selected indoor
   tanks" + "deep tanks" sur la meme rangee) ne casse jamais au milieu
   d'un mot. */
.selection_content .table_title {
    white-space: nowrap;
}

/* Texte present pour les lecteurs d'ecran seulement -- invisible a l'oeil,
   sans reserver d'espace dans la mise en page. Utilise par
   partials/_case-selection.blade.php (libelleCache) pour donner un nom
   accessible aux cases "ajouter a ma selection" dans les contextes compacts
   (tableau de plateaux/bassins, carte de backlot) ou un texte visible
   alourdirait inutilement l'affichage. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Adaptation mobile/tablette -- audit du 21/09/2026.
   ==========================================================================
   styles.css fige .sub_container, .results_container et .nav_container a
   "width: 960px" (aucun @media dans tout le fichier), donc en dessous de
   ~960px la page ne se reduit pas : elle deborde et le navigateur doit
   scroller horizontalement pour tout voir -- mesure en conditions reelles :
   ~600px de debordement a 375px (telephone), ~200px a 768px (tablette).
   Conformement a la regle du projet, on ne touche PAS a styles.css : ces
   trois classes sont redefinies ici (meme specificite, mais complement.css
   est charge apres, donc ces regles l'emportent) pour que le "960px" devienne
   un maximum plutot qu'une largeur fixe, puis on adapte les quelques blocs
   qui, eux, empechaient concretement le contenu de tenir dans une colonne
   plus etroite (panneau de filtres a 3 colonnes, menu de navigation). Ce
   n'est pas une refonte mobile complete -- voir le rapport d'audit -- mais
   ca supprime le debordement horizontal du corps de la page sur les pages
   publiques principales. */

.sub_container,
.results_container,
.nav_container {
    width: 100%;
    max-width: 960px;
}

@media (max-width: 768px) {
    /* Le panneau de filtres avance (studios/_filtres.blade.php) force 3
       colonnes cote a cote (flex-wrap: nowrap dans styles.css) : elles ne
       peuvent physiquement pas tenir sous ~900px de large. On les empile. */
    .search_ui_subcontainer_01 {
        flex-direction: column;
        flex-wrap: wrap;
    }

    /* Le menu de navigation (nav_ul) est lui aussi en "nowrap" avec des
       boutons a largeur minimale fixe dans styles.css : plutot que de le
       faire deborder de toute la page (ce qui forcait TOUT le site a
       scroller horizontalement), on le laisse defiler horizontalement
       lui-meme, dans son propre cadre. */
    .nav_container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Tableaux larges (annuaire, statistiques, fiche studio...) : meme
       principe, ils defilent dans leur propre cadre plutot que d'elargir
       toute la page. */
    .main_table_container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    /* Petit telephone : un peu de marge laterale minimale pour que le texte
       ne touche pas les bords de l'ecran, la ou styles.css n'en prevoit
       aucune en dessous de 960px. */
    .sub_container,
    .results_container {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Fiche detaillee d'un incitatif (page /incentives) -- demande explicite :
   cliquer sur le nom d'un incitatif, n'importe ou sur la page (liste,
   carte, classements, simulateurs), ouvre une fenetre avec la fiche
   complete. Superposition dediee (jamais .backdrop, deja utilise par les
   fenetres de connexion/inscription -- voir comptes/_fenetres.blade.php)
   pour ne jamais interferer avec ces autres fenetres. Couleur d'accent =
   celle de la zone (--inc-detail-accent, posee en JS depuis ZONE_COLORS,
   voir openIncentiveDetail() dans incitatifs.js), pour repérer la region
   d'un coup d'oeil des l'ouverture.
   ========================================================================== */

.inc_detail_overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background-color: hsla(210, 45%, 10%, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    animation: inc_detail_fade 0.15s ease-out;
}

.inc_detail_overlay[hidden] {
    display: none;
}

@keyframes inc_detail_fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.inc_detail_card {
    --inc-detail-accent: var(--vivid-color);
    position: relative;
    background-color: var(--bg-color);
    border-radius: 10px;
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    animation: inc_detail_pop 0.18s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}

@keyframes inc_detail_pop {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

.inc_detail_close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s;
}

.inc_detail_close:hover {
    background-color: rgba(255, 255, 255, 0.38);
}

.inc_detail_header {
    padding: 28px 46px 22px 28px;
    background: linear-gradient(135deg, var(--inc-detail-accent), hsl(210, 55%, 22%));
    color: #fff;
    border-radius: 10px 10px 0 0;
}

.inc_detail_badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.inc_detail_type_badge {
    background-color: rgba(255, 255, 255, 0.22);
}

.inc_detail_title {
    font-family: var(--main-font-bold);
    font-size: 1.7rem;
    line-height: 1.2;
    margin: 0;
    text-wrap: balance;
}

.inc_detail_subtitle {
    margin: 6px 0 0;
    font-size: 0.95rem;
    opacity: 0.85;
}

.inc_detail_body {
    padding: 24px 28px 28px;
}

/* Rangee d'action tout en bas de la fiche, alignee a droite -- demande
   explicite ("le bouton tout a droite, tout en bas"). Dernier element du
   corps de la fiche (voir openIncentiveDetail() dans incitatifs.js) :
   pas de marge basse propre, .inc_detail_body fournit deja le padding
   bas de la carte. */
.inc_detail_actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.inc_detail_actions .button_01 {
    font-size: 0.85rem;
    padding: 7px 14px;
    /* BUG CORRIGE : styles.css (jamais modifie, voir la regle standing)
       donne a TOUT <button> une marge "margin: 5px auto 5px auto" (regle
       generique "button {...}"). Avec des marges gauche ET droite a auto,
       flexbox centre le bouton lui-meme dans la rangee -- ca annule
       justify-content:flex-end du conteneur, d'ou le bouton qui semblait
       "au milieu" au lieu de "tout a droite". Remis a zero ici, comme
       n'importe quel style de <button> a l'interieur de .button_01. */
    margin: 0;
}

.inc_detail_kpis {
    margin-bottom: 22px;
}

.inc_detail_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px 20px;
    margin-bottom: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-xtra_light-color);
}

.inc_detail_item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inc_detail_label {
    font-size: 0.72rem;
    color: var(--neutral-medium-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.inc_detail_value {
    font-family: var(--main-font-bold);
    color: var(--studio-color);
}

.inc_detail_note_block {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-xtra_light-color);
}

.inc_detail_note_block h4 {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: var(--neutral-medium-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.inc_detail_note_block p {
    margin: 0;
    white-space: pre-line;
}

.inc_detail_footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-xtra_light-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.inc_detail_meta {
    margin: 0;
    font-size: 0.8rem;
    color: var(--neutral-medium-color);
}

/* Curseur + legere surbrillance au survol sur tout nom d'incitatif
   cliquable (voir data-inc-id dans incitatifs.js, ajoute uniquement sur
   une VRAIE ligne d'incitatif -- jamais sur une ligne "total"/agregee par
   pays, qui reste du texte simple non cliquable). */
.inc_nom[data-inc-id] {
    cursor: pointer;
}

.inc_table tbody tr:hover .inc_nom[data-inc-id] {
    color: var(--vivid-color);
    text-decoration: underline;
}

@media (max-width: 700px) {
    .inc_detail_header { padding: 22px 44px 18px 20px; }
    .inc_detail_body { padding: 20px 20px 24px; }
    .inc_detail_grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Autocompletion "maison" des 4 champs de recherche simple (accueil et
   annuaire) -- voir public/js/autocomplete.js. Remplace le <datalist>
   HTML natif, trop peu fiable au-dela d'une poignee d'options.
   ========================================================================== */
.sw_ac_field {
    position: relative;
}

.sw_ac_liste {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 4px 0;
    border-radius: var(--main-border-radius);
    background-color: var(--neutral-xtra_light-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.sw_ac_liste[hidden] {
    display: none;
}

.sw_ac_option {
    padding: 7px 14px;
    font-size: 0.9rem;
    color: var(--studio-color);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sw_ac_option:hover,
.sw_ac_option.sw_ac_option_actif {
    background-color: var(--contrast-color);
    color: var(--neutral-xtra_light-color);
}

/*
 * Bouton export PDF des fiches plateau / bassin exterieur (retour de
 * Xavier : "le bouton export pdf a gauche de imperial/metric, bien
 * aligne") -- deplace hors du bandeau de titre vers la ligne de la
 * bascule d'unites (voir partials._bouton-export-installation, inclus
 * juste avant .conversion_alt dans plateaux/show et bassins/show).
 * .installation_conversion_ligne (styles.css) ne faisait que du
 * text-align:right sur un seul enfant ; on la transforme ici en ligne
 * flex pour caler les deux elements ENSEMBLE a droite, a la meme
 * hauteur, dans l'ordre du HTML -- le bouton en premier se retrouve donc
 * bien a gauche du badge d'unites.
 */
.installation_conversion_ligne {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.installation_conversion_ligne .button_01 {
    /* Meme piege que .title_actions_row / .title_container_alt
       .results_container ailleurs dans ce fichier : "button" (styles.css)
       met "margin: 5px auto 5px auto" sur TOUT bouton, ce qui le
       centrerait dans l'espace libre d'une rangee flex. On neutralise et
       on repasse en inline-flex pour qu'il garde sa taille naturelle au
       lieu du display:block par defaut (.button_01 dans styles.css). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin: 0;
}

/* ==============================================================
   Fiche studio FERME : changement de couleur radical ("beaucoup
   plus de noir", demande explicite de Xavier). $ferme dans
   studios/show.blade.php ajoute .fiche_studio_fermee sur le
   conteneur qui enveloppe TOUTE la fiche (bandeau de titre, bloc
   d'infos, carte/galerie, tables plateaux/bassins, plans et
   documents joints) -- pas seulement .result_page_header_closed
   (styles.css, ligne ~2341) qui n'assombrissait que le bandeau.
   On garde les couleurs fonctionnelles (liens, valeurs, badges)
   mais eclaircies pour rester lisibles sur fond quasi noir --
   jamais de texte sombre laisse sur un fond qu'on vient de noircir.
   ============================================================== */

.fiche_studio_fermee {
    /* Demande explicite de Xavier : le fond noir ne doit pas s'etendre
       jusqu'au bord de la page (toute la largeur du navigateur, "grossier"),
       mais rester cale sur la largeur de la fiche elle-meme -- meme
       largeur que .title_container/.results_container (960px, voir
       styles.css), plus un peu de marge interne (15px de chaque cote,
       box-sizing:border-box global -- voir "* {}" dans styles.css --
       donc 960 + 15*2 = 990px au total, la fiche a l'interieur retombe
       pile sur les 960px). */
    width: 990px;
    margin: 0 auto 10px auto;
    background-color: hsl(0, 0%, 5%);
    color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 15px;
}

/* Bandeau de titre : le point le plus radicalement noirci -- c'est
   le premier signal visuel de la fiche, encore plus sombre que
   .result_page_header_closed (qui reste ici pour les fiches ou
   $ferme est vrai mais qu'on afficherait hors de ce conteneur). */
.fiche_studio_fermee .result_page_header,
.fiche_studio_fermee .result_page_header_closed {
    background-color: hsl(0, 0%, 2%);
}

/* Bloc d'infos generales (sous le bandeau) */
.fiche_studio_fermee .listcontainer_01 {
    background-color: hsl(0, 0%, 10%);
}
.fiche_studio_fermee .listcontainer_01 span {
    color: hsl(212, 90%, 70%);
}

/* Tables plateaux / bassins interieurs / bassins exterieurs */
.fiche_studio_fermee .main_table_container,
.fiche_studio_fermee .listcontainer_05 {
    background-color: hsl(0, 0%, 10%);
}
.fiche_studio_fermee table tbody tr:nth-child(even) {
    background-color: hsl(0, 0%, 14%);
}

/* Backlot / exterieurs (cartes avec photo) */
.fiche_studio_fermee .listcontainer_06 {
    background-color: hsl(0, 0%, 10%);
}
.fiche_studio_fermee .backlot_card_01 {
    background-color: hsl(0, 0%, 16%);
}

/* Notes de l'editeur + incitatifs (memes blocs que sur /incentives,
   mais assombris pour rester dans le ton de la fiche fermee) */
.fiche_studio_fermee .editor_notes,
.fiche_studio_fermee .inc_studio_item {
    background-color: hsl(0, 0%, 10%);
}
.fiche_studio_fermee .inc_studio_type,
.fiche_studio_fermee .inc_studio_empty {
    color: hsl(0, 0%, 65%);
}
.fiche_studio_fermee .inc_studio_pct {
    color: hsl(212, 90%, 70%);
}

/* Liens texte (site web, "voir le pdf", incitatifs...) */
.fiche_studio_fermee .text_link,
.fiche_studio_fermee .inc_studio_link {
    color: hsl(212, 90%, 70%);
}
.fiche_studio_fermee .text_link:hover {
    color: hsl(212, 90%, 80%);
}

/* Plans / documents joints (studio map, fiches techniques) */
.fiche_studio_fermee .listcontainer_05a {
    background-color: hsl(0, 0%, 10%);
}
.fiche_studio_fermee figcaption {
    color: hsl(0, 0%, 65%);
}

/* Bouton export pdf et cases "select" (memes classes .button_01) :
   assombris pour rester dans le ton plutot que garder le bleu
   habituel du reste du site. */
.fiche_studio_fermee .button_01 {
    background-color: hsl(0, 0%, 16%);
    color: var(--neutral-xtra_light-color);
    border: 1px solid hsl(0, 0%, 32%);
}
.fiche_studio_fermee .button_01:hover {
    background-color: hsl(0, 0%, 26%);
}

/* Titre "Studio ferme" / "Ranch ferme" (h1 en haut de studios/show) :
   demande explicite de Xavier -- exceptionnellement en rouge, pas dans
   le bleu habituel de .page_title (styles.css, jamais modifie). */
.page_title.page_title_closed {
    color: var(--basic_red);
}

/* ==============================================================
   Fiche studio A VENDRE : demande explicite de Xavier (2026-10-03),
   "comme pour studio ferme mais au lieu d'etre en noir, qu'elle soit
   rouge avec le titre en blanc". Meme structure exactement que le bloc
   .fiche_studio_fermee ci-dessus (meme echelle de profondeur de
   couleur, mêmes sous-blocs assombris/eclaircis), simplement une teinte
   rouge (hue 0, sature) a la place du gris (hue 0, 0% de saturation) --
   et PAS de regle equivalente a .page_title.page_title_closed puisque
   le titre doit justement rester blanc ici, pas rouge (voir juste
   apres ce bloc). $aVendre dans studios/show.blade.php est prioritaire
   sur $ferme si les deux etaient vrais a la fois. ============== */

.fiche_studio_a_vendre {
    /* Meme contrainte de largeur que .fiche_studio_fermee ci-dessus. */
    width: 990px;
    margin: 0 auto 10px auto;
    background-color: hsl(0, 65%, 24%);
    color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 15px;
}

/* Bandeau de titre : le plus fonce de la fiche, comme pour la variante
   fermee. */
.fiche_studio_a_vendre .result_page_header,
.fiche_studio_a_vendre .result_page_header_for_sale {
    background-color: hsl(0, 70%, 18%);
}

/* Bloc d'infos generales (sous le bandeau) */
.fiche_studio_a_vendre .listcontainer_01 {
    background-color: hsl(0, 55%, 30%);
}
.fiche_studio_a_vendre .listcontainer_01 span {
    color: hsl(212, 90%, 75%);
}

/* Tables plateaux / bassins interieurs / bassins exterieurs */
.fiche_studio_a_vendre .main_table_container,
.fiche_studio_a_vendre .listcontainer_05 {
    background-color: hsl(0, 55%, 30%);
}
.fiche_studio_a_vendre table tbody tr:nth-child(even) {
    background-color: hsl(0, 50%, 35%);
}

/* Backlot / exterieurs (cartes avec photo) */
.fiche_studio_a_vendre .listcontainer_06 {
    background-color: hsl(0, 55%, 30%);
}
.fiche_studio_a_vendre .backlot_card_01 {
    background-color: hsl(0, 50%, 38%);
}

/* Notes de l'editeur + incitatifs (memes blocs que sur /incentives,
   mais dans le ton rouge de la fiche a vendre) */
.fiche_studio_a_vendre .editor_notes,
.fiche_studio_a_vendre .inc_studio_item {
    background-color: hsl(0, 55%, 30%);
}
.fiche_studio_a_vendre .inc_studio_type,
.fiche_studio_a_vendre .inc_studio_empty {
    color: hsl(0, 25%, 82%);
}
.fiche_studio_a_vendre .inc_studio_pct {
    color: hsl(212, 90%, 75%);
}

/* Liens texte (site web, "voir le pdf", incitatifs...) : meme bleu
   fonctionnel que la variante fermee, garde reconnaissable. */
.fiche_studio_a_vendre .text_link,
.fiche_studio_a_vendre .inc_studio_link {
    color: hsl(212, 90%, 75%);
}
.fiche_studio_a_vendre .text_link:hover {
    color: hsl(212, 90%, 85%);
}

/* Plans / documents joints (studio map, fiches techniques) */
.fiche_studio_a_vendre .listcontainer_05a {
    background-color: hsl(0, 55%, 30%);
}
.fiche_studio_a_vendre figcaption {
    color: hsl(0, 25%, 82%);
}

/* Bouton export pdf et cases "select" (memes classes .button_01) */
.fiche_studio_a_vendre .button_01 {
    background-color: hsl(0, 50%, 38%);
    color: var(--neutral-xtra_light-color);
    border: 1px solid hsl(0, 40%, 55%);
}
.fiche_studio_a_vendre .button_01:hover {
    background-color: hsl(0, 50%, 46%);
}

/* Titre "Studio a vendre" / "Ranch a vendre" (h1 en haut de
   studios/show) : demande explicite de Xavier -- en BLANC, contrairement
   a la variante fermee qui le met en rouge (fond ici deja rouge, un
   titre rouge sur rouge serait illisible). */
.page_title.page_title_for_sale {
    color: var(--neutral-xtra_light-color);
}

/* Message "reserve aux comptes pro" (public/js/pro-gate.js) -- meme
   traitement visuel que #selection_signal (juste au-dessus dans ce
   fichier) : une bulle fixe en haut a droite, qui s'efface seule. Id
   distinct parce que ce message doit s'afficher meme pour un visiteur
   non connecte, contrairement a #selection_signal (voir le commentaire
   dans pro-gate.js). */
/* ==============================================================
   Fiche studio PROJECT : demande explicite de Xavier (2026-10-13),
   "ni noir, ni rouge, mais bleu clair". Meme principe exactement que
   .fiche_studio_fermee/.fiche_studio_a_vendre ci-dessus (un conteneur qui
   enveloppe toute la fiche), mais un theme CLAIR plutot que sombre : le
   texte par defaut du site (deja fonce, pense pour un fond clair/blanc)
   reste donc lisible tel quel sur un fond bleu pale, sans avoir besoin
   d'eclaircir chaque couleur de texte comme pour les 2 variantes sombres
   ci-dessus -- on se contente de teinter de bleu les fonds des blocs
   normalement blancs/gris clair. $estProjet est exclusif avec $ferme et
   $aVendre (voir StudioForm, qui empeche d'activer "studio project" si
   le studio est deja ferme ou a vendre). ============================== */

.fiche_studio_projet {
    /* Meme contrainte de largeur que .fiche_studio_fermee ci-dessus. */
    width: 990px;
    margin: 0 auto 10px auto;
    background-color: hsl(205, 70%, 95%);
    border-radius: var(--main-border-radius);
    padding: 15px;
}

/* Bandeau de titre : un bleu vivant (ni le bleu nuit par defaut, ni le
   bleu pale du fond de la fiche), texte blanc deja fourni par
   .result_page_header (styles.css). */
.fiche_studio_projet .result_page_header,
.fiche_studio_projet .result_page_header_project {
    background-color: hsl(205, 85%, 50%);
}

/* Bloc d'infos generales (sous le bandeau) */
.fiche_studio_projet .listcontainer_01 {
    background-color: hsl(205, 55%, 88%);
}

/* Tables plateaux / bassins interieurs / bassins exterieurs */
.fiche_studio_projet .main_table_container,
.fiche_studio_projet .listcontainer_05 {
    background-color: hsl(205, 55%, 88%);
}
.fiche_studio_projet table tbody tr:nth-child(even) {
    background-color: hsl(205, 45%, 93%);
}

/* Backlot / exterieurs (cartes avec photo) : pas de surcharge ici,
   contrairement aux variantes fermee/a_vendre -- .backlot_card_01 est
   deja en bleu fonce par defaut (styles.css, --vivid-color), ce qui
   reste parfaitement lisible sur un fond bleu clair (c'est uniquement
   sur fond quasi noir ou rouge que ce bleu par defaut posait probleme). */

/* Notes de l'editeur + incitatifs (memes blocs que sur /incentives) */
.fiche_studio_projet .editor_notes,
.fiche_studio_projet .inc_studio_item {
    background-color: hsl(205, 55%, 88%);
}

/* Plans / documents joints (studio map, fiches techniques) */
.fiche_studio_projet .listcontainer_05a {
    background-color: hsl(205, 40%, 97%);
}

/* Titre "Studio project" / "Ranch project" (h1 en haut de studios/show) :
   un bleu plus soutenu que le .page_title par defaut, pour rester bien
   visible sur le fond bleu pale de la fiche. */
.page_title.page_title_project {
    color: hsl(205, 95%, 30%);
}

#sw_pro_signal {
    /* Demande explicite de Xavier : plus gros et centre sur la page --
       contrairement a #selection_signal (bulle discrete en haut a
       droite), ce message doit se voir immediatement, quel que soit
       l'endroit de la page ou on vient de cliquer. */
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 60;
    padding: 24px 36px;
    border-radius: var(--main-border-radius);
    background-color: var(--studio-color);
    color: var(--neutral-xtra_light-color);
    font-family: var(--main-font-bold);
    font-size: 1.5rem;
    line-height: 1.4;
    text-align: center;
    max-width: min(90%, 560px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}

/* Carte reservee a un compte pro (partials/_carte.blade.php) -- demande
   explicite de Xavier, revue le meme jour : on voit desormais la VRAIE
   carte Leaflet, avec les points de situation des studios, mais grisee
   et inutilisable pour un compte non-pro (avant : un simple cadenas
   remplacait toute la carte -- .carte_conteneur enveloppe maintenant
   .carte_osm pour permettre ce voile par-dessus). */
.carte_conteneur {
    position: relative;
    width: 100%;
}

/* Le filtre gris : applique a la carte Leaflet elle-meme (tuiles,
   pastilles, controles), jamais au voile qui la recouvre. */
.carte_conteneur_verrouillee .carte_osm {
    filter: grayscale(100%) brightness(0.95);
}

/* Le voile : un calque transparent au-dessus de TOUTE la carte (boutons
   de zoom, choix du fond, "fit all" inclus), qui intercepte le moindre
   clic a leur place -- sans lui, une carte simplement grisee en CSS
   resterait parfaitement utilisable. */
.carte_voile {
    position: absolute;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .18);
    /* "not-allowed" plutot que "pointer" : le voile n'a plus d'action au
       clic (voir le commentaire dans _carte.blade.php) -- le curseur
       doit annoncer "verrouille", pas "cliquable". */
    cursor: not-allowed;
    text-align: center;
}

.carte_verrouillee_message {
    color: var(--neutral-xtra_light-color);
    font-size: 0.9rem;
    padding: 8px 20px;
    background-color: rgba(0, 0, 0, .55);
    border-radius: var(--main-border-radius);
}

.carte_verrouillee_cadenas {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 6px;
}

/* ------------------------------------------------------------------
   Page "faire un don" -- demande explicite de Xavier (2026-10-03) :
   d'abord "fixe la mise en page... beau et pro" (colonnes alignees),
   puis "fait un effort... mets des couleurs... fait quelque chose
   d'attractif". Scope sous .donate_layout (ajoute uniquement sur cette
   page dans gabarit.blade.php) pour ne pas changer la page abonnement,
   qui partage les memes classes (.flex_container_01, .account_side_column).

   La colonne de droite devient une vraie carte d'appel a l'action : un
   degrade des deux bleus de la marque (--vivid-color -> --studio-color,
   les memes couleurs que le logo et les PDF exportes), un liseret
   orange en haut (--contrast-color, la couleur d'accent du site, deja
   utilisee pour le bouton "incitatifs" du menu), et le bouton PayPal
   repose sur un socle blanc arrondi pour ressortir sur le fond bleu
   plutot que de flotter dessus. Un leger relief (box-shadow) le
   detache de la page, et une accroche courte (.donate_kicker) donne un
   vrai titre a la carte, qui n'en avait aucun avant. La boite de texte
   a gauche recoit juste un filet bleu pour repondre a la carte, sans
   lui faire concurrence. ------------------------------------------- */
/* ">" et pas " " : chaque bloc "paragraphe" (voir partials/_bloc.blade.php)
   s'enveloppe lui-meme dans son propre .flex_container_01 > .textcontainer
   -- imbrique DANS cette boite de texte. Un selecteur descendant aurait
   donc applique le filet bleu deux fois (la boite + le premier paragraphe
   a l'interieur), d'ou les "deux filets" signales par Xavier. */
.donate_layout > .textcontainer {
    border-left: 4px solid var(--vivid-color);
}

.donate_layout .account_side_column {
    box-sizing: border-box;
    padding: 28px 22px 26px;
    background-image: linear-gradient(165deg, var(--vivid-color), var(--studio-color));
    border-radius: var(--main-border-radius);
    border-top: 5px solid var(--contrast-color);
    box-shadow: 0 10px 24px -8px hsla(210, 100%, 20%, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.donate_layout .donate_kicker {
    font-family: var(--main-font-bold);
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--bg-color);
    margin: 0 0 10px;
    /* styles.css justifie TOUS les <p> par defaut (bien pour un long
       paragraphe, mais une accroche de 2-3 mots qui retombe a la ligne se
       retrouve etiree n'importe comment, avec un grand vide entre les
       mots -- exactement ce que Xavier a signale). On recentre ici. */
    text-align: center;
}

.donate_layout .account_side_column p {
    margin: 0 0 18px;
    text-align: center;
}

.donate_layout .account_side_column p:not(.donate_kicker) {
    color: hsl(212, 40%, 92%);
    font-size: 0.85rem;
}

.donate_layout #donate-button-container {
    width: 100%;
    padding: 18px 14px 16px;
    background-color: var(--bg-color);
    border-radius: var(--main-border-radius);
}


/* ------------------------------------------------------------------
   Revue de code (2026-10-04) : chaque bloc de contenu editorial
   ("paragraphe", "titre_section", "question"...) s'enveloppe dans son
   propre .flex_container_01 ou .title_container plein-largeur (voir
   partials/_bloc.blade.php) -- pense pour une .textcontainer pleine
   page (960px). Nest ces blocs DANS une .textcontainer plus etroite
   (ex. la colonne de texte des pages a deux colonnes, comme "faire un
   don" ou "SWpro", ~740px) et ils peuvent depasser leur boite. Fix
   general, pas scope a .donate_layout : la page SWpro utilise les
   memes blocs imbriques. ------------------------------------------- */
.textcontainer > .flex_container_01,
.textcontainer > .title_container {
    width: 100%;
    margin: 0 0 20px;
}

.textcontainer details > summary.flex_container_01 {
    width: 100%;
}

/* ==========================================================================
   Liste des studios (vue tableau, studios/index.blade.php) : ligne ROUGE pour
   un studio a vendre (meme rouge que sa carte et sa fiche), ORANGE pour un
   movie ranch (la couleur des ranches sur la carte geographique), et NOIR EN
   NEGATIF (texte clair) pour un studio ferme, comme sa fiche. Priorite :
   a vendre, puis ferme, puis ranch (comme sur les cartes). 
   ========================================================================== */
#resultsTable tbody tr.ligne_a_vendre,
#resultsTable tbody tr.ligne_a_vendre:nth-child(even) {
    background-color: hsl(0, 70%, 91%);
}


#resultsTable tbody tr.ligne_ranch,
#resultsTable tbody tr.ligne_ranch:nth-child(even) {
    background-color: hsl(40, 100%, 89%);
}

/* Studio project : bleu clair, meme teinte que la fiche individuelle
   (.fiche_studio_projet) et que la ligne admin (.fi-ta-row-project) --
   demande explicite de Xavier (2026-10-13). Nom de classe
   "ligne_studio_projet" (et pas "ligne_projet", deja pris plus haut
   dans ce fichier par la pastille "selection/projet" a cote des cases a
   cocher -- aucun rapport, pour eviter toute confusion). */
#resultsTable tbody tr.ligne_studio_projet,
#resultsTable tbody tr.ligne_studio_projet:nth-child(even) {
    background-color: hsl(205, 70%, 91%);
}

/* Pastille "studio project" sur les cartes resume (accueil "recently
   added...", et vue "cartes" de l'annuaire -- voir
   partials/_carte-studio.blade.php) : demande de Xavier (2026-10-15),
   que cette pastille reprenne exactement le meme bleu clair que la
   ligne "studio project" de la vue liste de l'annuaire juste au-dessus
   (#resultsTable tr.ligne_studio_projet), au lieu de la couleur du
   studio "normal" (bleu fonce, .studio_summary dans styles.css).
   Le texte passe en sombre : ce fond tres clair (91% de luminosite)
   rendrait illisible le blanc/quasi-blanc utilise par defaut sur les
   autres pastilles (--neutral-xtra_light-color, dans styles.css). */
.studio_project_summary {
    background-color: hsl(205, 70%, 91%);
    color: var(--neutral-dark-color);
    transition: background-color 50ms;
}

.studio_project_summary:hover {
    background-color: var(--ranch-hover-color);
}


#resultsTable tbody tr.ligne_fermee,
#resultsTable tbody tr.ligne_fermee:nth-child(even) {
    background-color: hsl(0, 0%, 7%);
    color: hsl(0, 0%, 92%);
}

#resultsTable tbody tr.ligne_fermee td,
#resultsTable tbody tr.ligne_fermee td a,
#resultsTable tbody tr.ligne_fermee td b {
    color: hsl(0, 0%, 92%);
}

#resultsTable tbody tr.ligne_fermee td a:hover {
    color: var(--contrast-color);
}


/* ==========================================================================
   Page "news" (pages/_news.blade.php).
   ========================================================================== */
.news_entete .title_container {
    margin: 0 auto;
}

/* Accroche sous le titre "News" : meme orange, mais une taille de sous-titre (3rem etait demesure). */
.news_entete .page_title {
    margin: 0 0 14px;
    font-size: 1.55rem;
    line-height: 1.25;
    letter-spacing: .02em;
}

.news_entete br {
    display: none;
}

/* Le CSS global donne aux titres h1..h6 une marge basse NEGATIVE (-10px) : dans l'encadre
   d'introduction, le titre chevauchait la ligne suivante. */
.news_intro .textcontainer h2,
.news_intro .textcontainer h3 {
    margin: 0 0 2px; /* un <br> suit deja le titre dans le contenu */
    line-height: 1.25;
}

.news_intro .textcontainer,
.news_intro .details_text_02 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.news_liste {
    margin-top: 6px;
}

/* Les deux parties de la page : studios | incitatifs (grands onglets). */
.news_sections {
    margin-top: 6px;
}

.news_onglets {
    display: flex;
    gap: 4px;
    border-bottom: 3px solid var(--vivid-color);
}

.news_onglet {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 28px 8px;
    border-radius: var(--main-border-radius) var(--main-border-radius) 0 0;
    background-color: var(--neutral-xtra_light-color);
    font-family: var(--main-font-bold);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vivid-color);
}

.news_onglet:hover {
    background-color: #dfe6f1;
}

.news_onglet.actif {
    background-color: var(--vivid-color);
    color: #fff;
}

.news_onglet_nb {
    color: inherit; /* styles.css colore tous les <span> en bleu : invisible sur l'onglet actif */
    font-family: inherit;
    font-size: .8rem;
    opacity: .75;
}

/* Index : une rangee par annee, avec ses mois (sauts d'ancre dans la page). */
.news_index {
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 10px 16px;
    margin-bottom: 8px;
}

.news_index_annee {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 4px 0;
}

.news_index_an {
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--vivid-color);
    margin-right: 6px;
}

.news_index_mois {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 14px;
    background-color: #fff;
    border: 1px solid #d5d9e0;
    font-size: .9rem;
    text-transform: capitalize;
    color: var(--vivid-color);
}

.news_index_mois:hover {
    background-color: var(--contrast-color);
    border-color: var(--contrast-color);
    color: #fff;
}

.news_index_nb {
    margin-left: 4px;
    font-size: .75rem;
    color: var(--neutral-medium-color);
}

.news_index_mois:hover .news_index_nb {
    color: #fff;
}

.news_annee {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 30px 0 4px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--contrast-color);
    font-family: var(--main-font-bold);
    font-size: 2.2rem;
    line-height: 1.1;
    color: var(--vivid-color);
    scroll-margin-top: 10px;
}

.news_haut {
    font-family: inherit;
    font-size: .8rem;
    font-weight: normal;
    color: var(--neutral-medium-color);
}

.news_mois {
    margin: 20px 0 10px;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--neutral-dark-color);
    scroll-margin-top: 10px;
}

/* Deux colonnes de cartes de meme hauteur par rangee : des lignes de texte de
   longueur raisonnable (~65 caracteres) plutot qu'une seule colonne de 960 px. */
.news_grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}

.news_article {
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-xtra_light-color);
    border-left: 4px solid var(--vivid-color);
    border-radius: var(--main-border-radius);
    padding: 16px 18px 14px;
    margin: 0;
    min-width: 0;
}

.news_titre {
    margin: 0 0 6px;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--vivid-color);
}

.news_meta {
    margin: 0 0 10px;
    font-size: .85rem;
    color: var(--neutral-medium-color);
}

.news_source {
    font-weight: bold;
    color: var(--contrast-color);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.news_sep {
    margin: 0 5px;
}

.news_corps {
    flex: 1 1 auto;
}

.news_corps p {
    margin: 0 0 9px;
    line-height: 1.55;
    font-size: .95rem;
    text-align: left;
    hyphens: none;
    overflow-wrap: anywhere;
}

.news_lien {
    margin: 6px 0 0;
}

.news_lien a {
    font-weight: bold;
    font-size: .9rem;
}

.news_vide {
    text-align: center;
    padding: 30px 0;
    color: var(--neutral-medium-color);
}

/*
 * Demande de Xavier (2026-10-11, puis correction le meme jour) : "facility"
 * (search_ui_subcontainer_col_02, premiere colonne de la 1ere rangee) doit
 * s'elargir en recuperant l'espace de l'ancienne colonne Category/
 * Classification -- MAIS, contrairement au 1er essai, cet elargissement
 * doit la rendre plus COURTE en bas, pas garder la meme hauteur.
 *
 * Cause du 1er essai rate : .search_ui_subcontainer_01 (styles.css) est en
 * display:flex sans align-items -- donc align-items:stretch par defaut --
 * et "facility" s'etirait pour egaler la hauteur de sa voisine "options"
 * (plus grande), meme une fois elargie : son propre contenu (quelques
 * cases a cocher + 1 menu) ne remplit pas cette hauteur, d'ou le vide en
 * bas que la largeur en plus ne reglait pas. On sort donc "facility" de cet
 * etirement avec align-self, SANS toucher .search_ui_subcontainer_col_02
 * elle-meme (reutilisee par "tanks", "exterior shooting areas",
 * "cyclorama", "specialized soundstage" plus bas, ou l'etirement en
 * hauteur reste voulu pour que ces colonnes s'alignent entre elles).
 */
.search_ui_facility_card {
    align-self: flex-start;
}

/*
 * VRAIE CAUSE TROUVEE (2026-10-11, apres reproduction fidele avec la
 * vraie police "Gill Sans MT W01 Medium" du site -- Xavier avait raison,
 * la grille d'options etait bien cassee, ce n'etait ni un cache ni une
 * fausse alerte). Les 2 colonnes de la grille ("backlot/workshop/outdoor
 * green screen" + "image post-production/sound post-production/
 * qualified production facility") ont besoin d'environ 346px cote a
 * cote avec la vraie police du site -- mais .search_ui_options_main
 * n'en avait que 343px de disponibles. 3px d'ecart suffisaient a tout
 * faire retomber sur une seule colonne (le flex-wrap de secours
 * s'appliquant aux DEUX colonnes des que l'une des deux ne tient plus).
 * Mesure faite avec Playwright + les vraies polices du site (un premier
 * test avec une police de secours avait donne la fausse impression que
 * ca rentrait). On elargit donc "options" nettement (563 -> 613px,
 * +50px, recupere automatiquement sur "facility" qui n'a pas de largeur
 * fixe -- voir .search_ui_facility_row plus bas, qui garde une marge
 * suffisante) et on resserre le panneau Category/Classification
 * (160 -> 145px) et l'ecart entre les deux (20 -> 16px) pour degager une
 * vraie marge de securite (~47px) au lieu des 3px d'avant -- pensee pour
 * resister aussi a une traduction plus longue que l'anglais (allemand,
 * russe...), pas seulement a du texte anglais mesure tout juste pile.
 */
.criterias_visibility .flex_size_fixer_01 {
    width: 613px;
}

/*
 * Xavier (2026-10-11) : en allemand, "Bildpostproduktion" (1er mot-cle
 * de la 2e colonne de "options") depassait legerement du cadre gris a
 * droite (capture d'ecran avec rectangle rouge a l'appui).
 * DEUX CORRECTIFS PRECEDENTS RETIRES LE JOUR MEME (tous deux rejetes
 * par Xavier) :
 *   1) elargir la regle generique ci-dessus (613 -> 750px) : touchait
 *      TOUTES les langues, pas seulement l'allemand.
 *   2) elargir "options" UNIQUEMENT en allemand via html[lang="de"] :
 *      corrigeait bien le debordement du texte, mais Xavier a repere
 *      un autre effet de bord -- elargir flex_size_fixer_01 agrandit
 *      tout le bloc noir "Suchfilter", qui ne s'alignait alors plus
 *      avec le reste du site au-dessus (barre de recherche, bouton
 *      bleu "Suchfilter") : "le bloc noir du search deborde par
 *      rapport au reste du site en dessus".
 * VRAIE CAUSE, repetee par Xavier lui-meme (il avait raison) : ce
 * n'est pas "Bildpostproduktion" qui a besoin de plus de place, c'est
 * "qualifizierte Produktionsstätte" (le 3e item de la meme colonne)
 * qui, affiche sur une seule ligne, mesure a lui seul ~191px -- bien
 * plus que "Bildpostproduktion" (~123px). C'est donc LUI qui dicte la
 * largeur naturelle de toute la colonne 2 et pousse son contenu
 * jusqu'au bord du cadre ; "Bildpostproduktion", coince dans une
 * colonne resserree d'autant, n'a alors plus la place de tenir sur sa
 * propre ligne et deborde a son tour.
 * CORRECTIF (celui-ci) : forcer "qualifizierte Produktionsstätte" --
 * allemand uniquement, ce libelle precis -- sur 2 lignes avec un
 * max-width (150px, mesure a la coupure naturelle de l'espace :
 * "qualifizierte" ~73px / "Produktionsstätte" ~114px, large marge des
 * deux cotes). Une fois ce libelle sur 2 lignes, c'est
 * "Tonpostproduktion" (~123px) qui devient le plus large de la
 * colonne -- a peine plus que "Bildpostproduktion" (~122.5px), donc
 * largement moins contraignant que les ~191px d'avant. Aucune largeur
 * de bloc ne change nulle part (flex_size_fixer_01 reste a 613px pour
 * toutes les langues, comme avant task G) : pas de risque de
 * desalignement des cadres, exactement comme demande.
 */
html[lang="de"] label[for="qualified_facility"] {
    max-width: 150px;
}

/*
 * Xavier (2026-10-11, nouveau rapport) : "Ok ca marche enfin.. sauf en
 * allemand t'as un petit souci de cadre a droite" -- MAIS, apres le
 * correctif juste au-dessus, Xavier a montre (capture + DevTools) que le
 * souci n'etait PAS dans la colonne "options" (plus de debordement
 * visible la), mais que TOUT LE PANNEAU DE FILTRES (les 3 rangees :
 * facility/options, bassins, zones de tournage exterieures/cyclorama/
 * studio specialise) rendait plus large que le reste du site au-dessus
 * (barre de recherche, bouton bleu "Suchfilter"), UNIQUEMENT en
 * allemand : "tu mets une marge et du coup en allemand la boite noire
 * s'elargit... alors que dans les autres langues c'est parfait".
 *
 * VRAIE CAUSE (trouvee par reproduction complete du panneau ENTIER --
 * les 3 rangees, pas seulement facility/options comme dans tous mes
 * essais precedents -- puis diagnostic scrollWidth vs clientWidth) :
 * .search_ui_master_container (styles.css) est en display:flex,
 * flex-direction:column, SANS align-items declare -- donc align-items:
 * stretch par defaut. Ses rangees (.search_ui_subcontainer_01) n'ont
 * elles-memes AUCUN max-width : quand au moins UNE rangee a besoin de
 * plus de 960px pour son contenu non-casse (en allemand : la rangee
 * "bassins" et la rangee "zones exterieures/cyclorama/studio
 * specialise" ont chacune des libelles assez longs pour depasser les
 * 960px disponibles, meme avec le retour a la ligne deja en place),
 * le navigateur etire TOUTES les rangees (stretch) a cette largeur plus
 * grande (mesure : 986px au lieu de 960px) -- y compris la rangee
 * facility/options, dont le contenu tenait pourtant tres bien tout
 * seul. C'est ce qui donnait l'impression (exacte) que "la boite noire
 * s'elargit" en allemand : ce n'est pas une marge que j'ajoute, c'est
 * tout le panneau qui s'etire pour loger une AUTRE rangee, plus bas,
 * qu'on ne voit meme pas dans la capture d'ecran.
 * Confirme que ce n'est PAS un probleme de largeur automatique minimale
 * (teste min-width:0 sur les rangees et sur leurs colonnes fixes --
 * aucun effet) : c'est bien le calcul d'etirement (stretch) qui n'a
 * aucun plafond. Seul un max-width explicite sur la rangee elle-meme
 * corrige ca (verifie : avec max-width, le retresissement (flex-shrink),
 * deja fonctionnel sur les colonnes a largeur fixe, s'applique enfin
 * correctement et tout rentre dans les 960px sans rien faire deborder).
 * CORRECTIF : .search_ui_subcontainer_01 ne doit jamais etre plus large
 * que son parent, quelle que soit la langue -- comportement voulu pour
 * les 3 rangees, pas seulement celle d'"options" deja corrigee plus
 * haut, donc regle generique (pas de html[lang] ici, c'est une regle
 * structurelle qui protege toutes les langues, meme si seul l'allemand
 * en avait besoin aujourd'hui).
 */
.search_ui_subcontainer_01 {
    max-width: 100%;
}


/*
 * Demande de Xavier (2026-10-11, correction) : Category et Classification
 * (resources/views/studios/_filtres.blade.php) doivent etre nettement
 * separees graphiquement d'"options", a droite -- pas simplement ajoutees
 * a la suite dans le meme bloc (1er essai rejete : en plus d'allonger
 * "options" en hauteur, rien ne les distinguait visuellement des cases a
 * cocher juste au-dessus). .search_ui_options_layout met donc les cases a
 * cocher et ce nouveau panneau cote a cote ; comme il n'y a pas d'align-
 * items ici, le comportement par defaut (stretch) egalise leurs hauteurs,
 * ce qui permet a la ligne verticale (border-left, ci-dessous) de courir
 * sur toute la hauteur du bloc "options", pas seulement celle du panneau.
 */
.search_ui_options_layout {
    display: flex;
    flex-direction: row;
    gap: 16px;
    /* Xavier (2026-10-11) : "il y a une ligne de trop" -- en realite un
       grand vide en bas du panneau Category/Classification. Cause reelle :
       .search_ui_options_layout est le seul enfant de son parent
       (.search_ui_subcontainer_col_02.flex_size_fixer_01, styles.css,
       display:flex en COLONNE) -- sans flex-grow, il ne prend QUE la
       hauteur naturelle de son propre contenu (le plus grand de "options"
       et du panneau), jamais celle, plus grande, de la carte "installation"
       voisine (.search_ui_facility_card) a laquelle cette carte est
       pourtant etiree pour s'aligner (.search_ui_subcontainer_01, stretch
       par defaut). Le "align-content: flex-end" du panneau (plus bas)
       descendait donc Category/Classification au bas de CETTE hauteur
       reduite -- pas au bas de la vraie carte grise, nettement plus haute
       -- laissant un espace vide sous l'icone info, quasiment invisible
       sur la couleur de fond mais bien reel. flex-grow:1 fait prendre a
       .search_ui_options_layout toute la hauteur disponible de la carte :
       le panneau s'etire alors jusqu'au vrai bas de la carte, et
       Category/Classification s'alignent enfin sur le bas REEL, au niveau
       de "installation" a cote. */
    flex-grow: 1;
}

.search_ui_options_main {
    flex: 1 1 auto;
    min-width: 0;
}

/*
 * Xavier (2026-10-11) : "tu n'as pas applique cette nouvelle mise en page
 * dans toutes les langues" -- a raison. La largeur de "options" (613px,
 * voir .flex_size_fixer_01 plus haut) avait ete calculee et verifiee
 * uniquement avec le texte anglais/francais. Dans les langues aux
 * libelles beaucoup plus longs (allemand, espagnol, japonais, et surtout
 * russe -- "сертифицированное производственное предприятие" pour
 * "qualified production facility" a lui seul besoin d'environ 360px),
 * les 2 colonnes de la grille ne tenaient plus cote a cote : exactement
 * le meme bug de fond que celui deja corrige pour l'anglais (voir plus
 * haut, "VRAIE CAUSE TROUVEE"), mais cette fois-ci pour des langues bien
 * plus verbeuses -- la grille retombait entierement sur une seule
 * colonne. On rend donc la grille independante de la longueur du texte :
 * flex-wrap:nowrap sur les 2 colonnes les empeche desormais de retomber
 * l'une sous l'autre quelle que soit leur largeur, et un libelle trop
 * long pour tenir sur une ligne passe simplement a la ligne a
 * l'INTERIEUR de sa colonne (overflow-wrap/word-break) au lieu de casser
 * la mise en page.
 *
 * Correction du 2026-10-11 (suite) : un premier essai forçait les 2
 * colonnes a exactement la meme largeur (flex: 1 1 0), quelle que soit
 * la longueur reelle de leur contenu. Resultat signale par Xavier : meme
 * en francais, "post-production d'images" passait inutilement sur 2
 * lignes (alors qu'il tient sur 1 ligne avec un peu plus de place), ce
 * qui agrandissait "options" en hauteur et, par ricochet, le panneau
 * Category/Classification a cote (qui s'etire pour l'egaler, voir
 * .search_ui_options_panel plus bas) -- avec "align-content: flex-end",
 * ce surplus de hauteur inutilise se voyait comme un grand vide au-dessus
 * de Category ("une ligne de trop"). On revient donc a une largeur de
 * colonne basee sur le CONTENU (comme a l'origine, avant le bug des
 * langues) : chaque colonne ne prend que la largeur dont elle a besoin,
 * et ne retrecit (donc ne passe eventuellement a la ligne) que si les 2
 * colonnes, mises bout a bout, ne tiennent vraiment pas dans la largeur
 * disponible -- ce qui n'arrive plus qu'en dernier recours, au lieu de
 * systematiquement pour la moitie des libelles.
 */
.search_ui_options_main .search_ui_subcontainer_col_03 {
    flex-wrap: nowrap;
}

.search_ui_options_main .search_ui_subcontainer_col_03 > div {
    flex: 0 1 auto;
    min-width: 0;
}

.search_ui_options_main .search_ui_subcontainer_col_03 label {
    overflow-wrap: break-word;
    word-break: break-word;
}

/*
 * Meme bug, meme remede, pour les 2 autres blocs a 3 sous-colonnes de
 * cases a cocher du panneau de filtres avances : "exterior shooting
 * areas or backlots" et "specialized soundstage" (resources/views/
 * studios/_filtres.blade.php, chacun .search_ui_subcontainer_col_02
 * .flex_size_fixer_03). Signale par Xavier le 2026-10-12 : en ajoutant
 * la traduction des zones de tournage ("western", "military zone"...),
 * certains libelles francais/espagnol/russe ("quartier d'affaires",
 * "distrito de negocios", "zona militar"...) sont devenus assez longs
 * pour faire depasser la largeur totale des 3 sous-colonnes au-dela des
 * 392px fixes du bloc -- la derniere sous-colonne passait alors a la
 * ligne (flex-wrap: wrap, styles.css), cassant la grille a 3 colonnes
 * nettes en 2 colonnes + 1 rangee en trop, alors que les langues a
 * libelles plus courts (anglais, allemand, japonais...) tenaient bien
 * sur une seule rangee. Meme solution que ci-dessus : ces 3 sous-colonnes
 * restent sur une seule rangee (nowrap) en se retrecissant au besoin
 * (flex: 0 1 auto + min-width: 0), et c'est le LIBELLE qui passe a la
 * ligne (overflow-wrap) si necessaire -- jamais toute la colonne.
 */
.search_ui_subcontainer_col_02.flex_size_fixer_03 .search_ui_subcontainer_col_03 {
    flex-wrap: nowrap;
}

.search_ui_subcontainer_col_02.flex_size_fixer_03 .search_ui_subcontainer_col_03 > div {
    flex: 0 1 auto;
    min-width: 0;
}

.search_ui_subcontainer_col_02.flex_size_fixer_03 .search_ui_subcontainer_col_03 label {
    overflow-wrap: break-word;
    word-break: break-word;
}

/*
 * Meme couleur de separation que .search_filters_actions un peu plus bas
 * dans ce fichier (border-top : "ligne de separation nette" entre les 3
 * blocs gris et la rangee de boutons "reset"/"update search") -- on
 * reprend le meme principe ici, en vertical, pour une separation visuelle
 * coherente avec le reste du panneau plutot qu'une couleur inventee.
 */
.search_ui_options_panel {
    /* BUG CORRIGE (2026-10-11) : "flex-direction: column" ici faisait
       passer l'axe principal du flex a la verticale -- et la regle
       generale "select" (plus haut dans ce fichier) porte
       "flex-basis: 190px", pensee pour l'axe principal HORIZONTAL des
       groupes de champs partout ailleurs sur le site (ou elle agit comme
       une largeur). Sur l'axe vertical ici, ce meme flex-basis devenait
       une HAUTEUR de 190px et l'emportait sur "height: 40px" (select,
       styles.css) : chaque <select> se retrouvait etire a ~190px de haut,
       et le panneau entier (donc tout le bloc "options" a cote, qui
       s'etire pour l'egaler) gonflait enormement -- capture d'ecran de
       Xavier a l'appui. On revient donc a "flex-direction: row" avec
       retour a la ligne (comme l'ancienne .search_ui_subcontainer_col_04
       dont ce panneau reprend le principe) : l'axe principal redevient
       horizontal, flex-basis agit de nouveau comme une largeur (plafonnee
       a 100px par "select#type, select#classification", styles.css), et
       les deux select (100px chacun) + le picto ne tiennent pas cote a
       cote dans les 140px de large disponibles (160px - 20px de
       padding) : ils retombent chacun sur leur propre ligne, empiles
       verticalement comme voulu, mais sans toucher a leur hauteur. */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* Demande de Xavier (2026-10-11, capture annotee, fleches rouges) :
       Category et Classification ne doivent pas rester collees en haut du
       panneau (ancien "align-content: flex-start"), ce qui laissait un
       grand vide en dessous une fois le panneau etire a la hauteur de la
       grille de cases a cocher juste a cote (.search_ui_options_main).
       "flex-end" (essaye ensuite) a cree le probleme inverse des que
       .search_ui_options_layout a ete etire sur la VRAIE hauteur de la
       carte (flex-grow:1 plus haut, 2026-10-11) : tout le vide se
       retrouvait alors en haut, juste sous "options", ce qui se voit
       bien davantage qu'en bas (signale par Xavier : "c'est pire
       qu'avant"). Avec "center", le vide se repartit pour moitie en haut
       et pour moitie en bas -- aucun des deux cotes ne cree plus un grand
       espace vide isole et voyant. */
    align-content: center;
    gap: 10px;
    flex: 0 0 145px;
    /* Demande de Xavier (2026-10-11, intervertir les deux blocs) : le
       panneau Category/Classification est maintenant le premier enfant de
       .search_ui_options_layout (a GAUCHE), les cases a cocher "options"
       le second (a DROITE) -- la ligne de separation passe donc du cote
       DROIT du panneau (avant : padding-left/border-left) pour continuer a
       courir entre les deux blocs, et non plus sur son bord exterieur
       gauche. */
    padding-right: 20px;
    border-right: 1px solid var(--neutral-light-color);
}

/*
 * .picto_01 (styles.css) est positionne en absolu (right: 15px; bottom:
 * 13px), pense pour l'ancienne colonne etroite et dediee
 * (.search_ui_subcontainer_col_04, position: relative) ou Category et
 * Classification vivaient seuls. Ici, le picto rejoint Category et
 * Classification dans le flux normal de .search_ui_options_panel (display:
 * flex, voir ci-dessus) : on neutralise donc le positionnement absolu
 * plutot que de donner "position: relative" a un ancetre pour ce seul
 * usage, ce qui aurait pu avoir des effets de bord sur d'autres elements
 * positionnes en absolu dans cette meme colonne "options".
 */
.picto_01--inline {
    position: static;
    bottom: auto;
    right: auto;
}

/*
 * Demande de Xavier (2026-10-11, capture annotee, fleche bleue) :
 * "closed studios" et "only studios for sale" (resources/views/studios/
 * _filtres.blade.php) rejoignent la meme rangee au lieu d'etre empiles.
 *
 * Correction du 2026-10-11 (suite) : le "flex-wrap: wrap" ci-dessous
 * avait ete pense comme un filet de securite (si une traduction plus
 * longue ne tient pas, "for sale" repasse sous le menu). En pratique il
 * se declenchait bien plus souvent que prevu -- francais, allemand,
 * japonais et russe retombaient chacun sur leur propre ligne, Xavier a
 * juste titre signale que seul l'anglais restait sur une seule rangee
 * ("la version anglaise est totalement juste, fait toutes les versions
 * comme l'anglaise"). Meme remede que pour la grille "options" plus
 * haut : flex-wrap: nowrap interdit desormais a "for sale" de retomber
 * sur sa propre ligne, et un libelle trop long pour tenir a cote du menu
 * passe simplement a la ligne a l'INTERIEUR de son propre champ
 * (overflow-wrap, ci-dessous) -- la rangee reste toujours sur 1 ligne,
 * quelle que soit la langue.
 */
.search_ui_facility_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 20px;
}

.search_ui_facility_row .closed_studios_field {
    /* CORRECTION (2026-10-11) : une largeur fixe ici (220px, 1er essai)
       ne laissait pas assez de place pour "only studios for sale" juste a
       cote dans les 352px reellement disponibles (mesure sur le rendu,
       voir capture de Xavier -- les deux retombaient alors chacun sur
       leur propre ligne, le flex-wrap de secours se declenchant). On
       laisse plutot "for_sale_field" (ci-dessous) reclamer EXACTEMENT ce
       dont il a besoin, et ce champ recupere tout le reste -- robuste
       quelle que soit la langue (un "for sale" traduit plus long reclame
       simplement plus de place pour lui, sans calcul de largeur fixe a
       deviner a l'avance). */
    flex: 1 1 auto;
    min-width: 140px;
}

/*
 * 2026-10-11 (suite) : flex-shrink et min-width:0 (au lieu de
 * "flex: 0 0 auto" + "white-space: nowrap") permettent a ce champ de
 * retrecir quand une traduction est trop longue pour tenir cote a cote
 * avec le menu "closed studios" -- au lieu de faire deborder la rangee
 * (voir .search_ui_facility_row ci-dessus).
 *
 * Xavier (2026-10-11, suite) : "le texte est dessous la tick box... pas
 * sur la meme ligne" -- la case et son label restaient en flux inline
 * normal (le label passe en "display: inline-block", styles.css). Une
 * fois le label contraint a retrecir, des qu'un premier mot du libelle
 * traduit ne tenait plus a cote de la case dans l'espace restant sur la
 * ligne, la regle standard du flux inline fait passer TOUT le bloc
 * <label> (boite inline-block indivisible) a la ligne suivante -- pas
 * seulement son texte en trop -- d'ou la case seule sur sa ligne et le
 * libelle entier en dessous (visible en allemand/russe, aux premiers
 * mots longs : "Ausschließlich...", "сертифицированное..."). Meme remede
 * que .tank_option plus haut dans ce fichier (deja utilise pour
 * "bassins" et la grille "options") : une mini-rangee flex met la case
 * et le label cote a cote de maniere EXPLICITE, alignes par le HAUT
 * (align-items: flex-start) -- le label peut alors passer a la ligne
 * autant de fois que necessaire SANS jamais decrocher la case, qui reste
 * fixee a cote de la toute premiere ligne du texte.
 */
.search_ui_facility_row .for_sale_field {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    margin-top: 0;
}

.search_ui_facility_row .for_sale_field label {
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

/*
 * Conteneur des 2 cases a cocher ("for sale" + "studio project"), ajoute
 * le 2026-10-13 avec la case "studio project" elle-meme. Les empiler ici
 * (plutot que les laisser cote a cote comme enfants directs de
 * .search_ui_facility_row) rend a cette derniere EXACTEMENT les 2
 * enfants pour lesquels son budget de largeur a ete calcule le
 * 2026-10-11 (le menu "closed studios" + UNE case) -- sans ca, les 2
 * cases se partageaient un espace pense pour une seule, et en
 * francais/espagnol/russe (libelles les plus longs, chacun sur plusieurs
 * mots) elles s'ecrasaient presque a largeur nulle, chaque mot
 * repassant alors a la ligne tout seul (capture d'ecran de Xavier :
 * rangee demesurement haute, debordant sur le bloc "bassins" suivant).
 * Reste robuste quelle que soit la langue, sans largeurs a deviner.
 */
.search_ui_facility_row .search_ui_facility_checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

/* ==========================================================================
   Menu du haut : les boutons d'un meme groupe ne passent jamais a la ligne.
   En russe (libelles plus longs : "сделать пожертвование"), chaque groupe
   depassait de quelques pixels et son dernier bouton tombait sous le premier.
   white-space:nowrap sur le groupe l'interdit ; en russe on resserre en plus
   les boutons (marge, remplissage, largeur minimale) pour garder de la marge.
   Les autres langues gardent exactement leur mise en page actuelle.
   ========================================================================== */
.nav_ul > div {
    white-space: nowrap;
}

html[lang="ru"] .nav_ul > div > li {
    min-width: 0;
    padding: 4px 8px;
    margin: 0 3px;
}

/* Bloc "options" du panneau de recherche (accueil + annuaire) : une ligne vide sous le titre
   "options", dans toutes les langues (la regle ne depend d'aucun texte). */
.search_ui_options_main > .form_subtitle {
    margin-bottom: 1.5rem;
}

/* Pastille "Opinions" sous l'avis editorial d'un livre (page "livres") -- demande de
   Xavier (2026-10-14). styles.css (ligne ~1629, jamais modifie directement) codait ce
   texte en dur en anglais ("our opinion") via ::before, ce qui l'empechait d'etre
   traduit. On neutralise ce ::before et on le remplace par le <span class="fsd_note_badge">
   ajoute dans resources/views/pages/gabarit.blade.php, dont le texte passe par __()
   (cle "Opinions" dans lang/*.json) et qui ne s'affiche que si l'avis n'est pas
   reellement vide. Les valeurs visuelles (couleur, fond, padding, contour) reprennent
   exactement celles de l'ancien ::before. */
.fsd_note::before {
    content: none;
}

.fsd_note_badge {
    display: inline-block;
    margin-right: 10px;
    color: var(--neutral-xtra_light-color);
    background-color: var(--vivid-color);
    padding: 2px 5px 2px 5px;
    outline-style: solid;
    outline-width: 1px;
}

/* Filet de securite pour la police "Gill Sans" achetee par Xavier -- demande de
   Xavier (2026-10-14) apres que j'ai repere que public/fonts/gill-sans-medium.woff2
   et gill-sans-bold.woff2 (a la racine du dossier, non references ailleurs) sont des
   fichiers morts et casses (ils contiennent une page d'erreur 404, pas une vraie
   police -- sans consequence en soi puisque rien ne les charge).
   En creusant plus loin, j'ai trouve le vrai souci : les @font-face de styles.css
   (ligne ~117, jamais modifie directement) pointent vers "../Fonts/5727175/..." et
   "../Fonts/5727187/..." -- avec un F MAJUSCULE -- alors que le dossier reel sur le
   disque s'appelle "fonts" (minuscule). Sur le Mac de Xavier (systeme de fichiers
   insensible a la casse), ca ne pose aucun probleme ; mais sur un serveur Linux
   (sensible a la casse, le cas de la plupart des hebergements), ces fichiers
   repondraient "introuvable" et le texte du site basculerait silencieusement sur
   une police de secours du navigateur.
   On rajoute ici les memes regles avec le bon chemin (casse correcte) : comme ce
   fichier se charge apres styles.css (voir layouts/public.blade.php), le navigateur
   privilegie cette version si jamais la premiere echoue -- aucun changement visible
   si tout fonctionnait deja, une securite en plus si ce n'etait pas le cas. */
@font-face {
    font-family: "Gill Sans MT W01 Medium";
    src: url("../fonts/5727175/5dcd1b38-d595-4966-9d40-696b7b29c0cd.woff2") format("woff2"),
        url("../fonts/5727175/b9947f64-d079-4c63-bcb3-d50ea832f4d9.woff") format("woff");
}
@font-face {
    font-family: "Gill Sans MT W01 Bold";
    src: url("../fonts/5727187/86470f48-8e3a-4e92-814b-253f9befd235.woff2") format("woff2"),
        url("../fonts/5727187/6f221e27-e272-4694-960b-a1fad35ed77d.woff") format("woff");
}


/* ==========================================================================
   Page "pro" (SWpro) : prix reel sous l'etiquette "monthly/yearly plan".
   ========================================================================== */
/* Ajoute le 2026-10-15 (voir pages/_abonnement.blade.php et
   App\Support\TarifsAbonnement::prixDuPlan) : jusqu'ici, cette colonne
   n'affichait que l'etiquette "monthly plan"/"yearly plan" (.price_txt_03,
   dans styles.css) et le bouton PayPal, sans aucun prix -- le prix que
   l'on pouvait voir sur la page venait du texte tape a la main dans le
   contenu editorial, deconnecte du vrai prix facture. Ce prix est
   desormais affiche ici, juste sous l'etiquette. */
.price_abonnement_actuel {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--neutral-dark-color);
    margin: 10px 0 0;
}


/* ==========================================================================
   Page "pro" (SWpro) : mise en page "pro et vendeuse" (2026-10-15, demande
   de Xavier, capture de l'ancienne version a l'appui : "mets en page avec
   au minimum comme l'ancienne version... ou mieux... de facon pro et
   vendeuse"). Scope sous ".abonnement_layout" (ajoute uniquement sur cette
   page dans gabarit.blade.php -- voir le commentaire pres de
   ".donate_layout" plus haut dans ce fichier, meme logique) pour ne rien
   changer sur les autres pages qui partagent .flex_container_01 /
   .textcontainer / .account_side_column / .price_txt_03 -- notamment
   comptes/profil.blade.php, qui utilise .account_side_column et
   .price_txt_03 pour un tout autre usage ("my account").
   ========================================================================== */

/* --- Liste a puces (texte editorial de gauche) : vraies coches rondes,
   plus lisibles et plus "vendeuses" qu'un simple point. --- */
.abonnement_layout .textcontainer ul {
    list-style: none;
    padding-left: 0;
}

.abonnement_layout .textcontainer ul li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
}

.abonnement_layout .textcontainer ul li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--basic_green);
    color: var(--bg-color);
    font-size: 0.8rem;
    font-family: var(--main-font-bold);
}

/* --- Colonne d'abonnement (droite) : deux vraies cartes au lieu d'un
   simple bloc de texte + bouton. --- */
/* Largeur volontairement laissee a .account_side_column (210px, voir
   styles.css) : .flex_container_01 fait 960px de large au total (740px de
   texte + 210px de colonne) -- l'elargir ici ferait passer la colonne a
   la ligne suivante (flex-wrap: wrap), exactement le bug signale par
   Xavier le 2026-10-15 lors de la premiere version de cette mise en page. */
.abonnement_layout .account_side_column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.abonnement_layout .abonnement_carte {
    position: relative;
    overflow: hidden;
    background-color: var(--bg-color);
    border-radius: var(--main-border-radius);
    box-shadow: 0 8px 20px -10px hsla(210, 100%, 20%, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.abonnement_layout .abonnement_carte:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -10px hsla(210, 100%, 20%, 0.45);
}

/* La pastille ".price_txt_03" devient l'entete de la carte : elle doit
   toucher les bords (le rayon vient desormais de la carte elle-meme, qui
   a "overflow: hidden"). */
.abonnement_layout .abonnement_carte > .price_txt_03 {
    margin: 0;
    border-radius: 0;
}

.abonnement_layout .abonnement_carte_corps {
    padding: 18px 16px 22px;
}

.abonnement_layout .abonnement_carte_corps p {
    margin: 0 0 14px;
    text-align: center;
}

.abonnement_layout .abonnement_carte_corps p:not(.price_abonnement_actuel) {
    color: var(--neutral-medium-color);
    font-size: 0.85rem;
}

.abonnement_layout .abonnement_carte_corps p:last-child {
    margin-bottom: 0;
}

/* Le plan annuel (toujours le plus avantageux au mois) se distingue :
   liseret orange -- meme accent que .donate_layout plus haut -- et ruban
   "Best value". */
.abonnement_layout .abonnement_carte_recommandee {
    border: 2px solid var(--contrast-color);
}

.abonnement_layout .abonnement_carte_recommandee > .price_txt_03 {
    background-color: var(--contrast-color);
}

.abonnement_layout .abonnement_badge_recommandee {
    position: absolute;
    top: 18px;
    right: -38px;
    width: 160px;
    transform: rotate(40deg);
    text-align: center;
    background-color: var(--basic_green);
    /* Signale par Xavier (2026-10-15) : "blanc sur fluo" ne se voit pas
       assez -- un texte fonce sur ce vert vif porte beaucoup mieux, et un
       ruban plus grand/plus epais se remarque vraiment. */
    color: hsl(130, 70%, 12%);
    font-family: var(--main-font-bold);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 6px 0;
    box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.3);
    z-index: 2;
}

/* --- Cartes de prix (colonne de gauche, bloc editorial "tarifs") : du
   relief, et le plan annuel mis en avant avec un ruban "Save X%" calcule
   en direct (voir partials/_bloc.blade.php, cas "tarifs") -- jamais
   affiche si le pourcentage n'a pas pu etre calcule a partir du vrai prix
   PayPal. --- */
.abonnement_layout .price_card {
    box-shadow: 0 6px 16px -8px hsla(210, 100%, 20%, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.abonnement_layout .price_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 22px -8px hsla(210, 100%, 20%, 0.4);
}

.abonnement_layout .price_card_recommandee {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--contrast-color);
}

.abonnement_layout .price_card_badge {
    position: absolute;
    top: 14px;
    right: -36px;
    width: 150px;
    transform: rotate(40deg);
    text-align: center;
    background-color: var(--basic_green);
    /* Meme correctif que .abonnement_badge_recommandee : texte fonce (pas
       blanc) sur le vert vif, et un ruban plus grand. */
    color: hsl(130, 70%, 12%);
    font-family: var(--main-font-bold);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 5px 0;
    box-shadow: 0 2px 7px hsla(0, 0%, 0%, 0.3);
    z-index: 2;
}

/* "il y a souvent une ligne d'espace de trop" (Xavier, 2026-10-15) : le
   bloc "titre" (h4) est toujours suivi d'un <br> structurel -- voir
   partials/_bloc.blade.php -- qui ajoute une ligne vide complete en plus
   de la marge normale du h4. Invisible la plupart du temps (le bloc
   suivant a lui-meme de la marge au-dessus), mais tres visible sur cette
   page, plus dense que les autres. */
.abonnement_layout .textcontainer h4 + br {
    display: none;
}

/* --- Titre "publicitaire" (toggle "Make this title stand out" dans
   l'admin, voir PageForm.php) : demande de Xavier (2026-10-15) -- "en bcp
   plus grand, centre et tres mis en valeur... on fait de la pub la !".
   Classe generale (pas scopee a .abonnement_layout) : conçue pour
   n'importe quel titre de section qui doit se lire comme une accroche,
   pas seulement sur cette page. --- */
.titre_mise_en_avant {
    display: block;
    text-align: center;
    font-family: var(--main-font-bold);
    font-size: 2.1rem;
    line-height: 1.25;
    color: var(--studio-color);
    margin: 20px 0 15px !important;
    text-wrap: balance;
}

/* Demande de Xavier (2026-10-25) : la note editoriale du studio (champ
   "editor_rating", plafonnee a 10 par pas de 0.5 -- voir StudioForm.php)
   doit se demarquer nettement sur la fiche publique du studio, juste
   au-dessus du commentaire editorial -- voir studios/show.blade.php.
   Presentee en badge plein (fond couleur studio, chiffre en gros) plutot
   qu'en simple texte colore comme .inc_studio_pct un peu plus haut sur
   cette meme page : ici, le but explicite est que l'oeil s'y arrete tout
   de suite, pas seulement qu'elle ressorte du texte autour. */
/* Meme remede que .inc_studio_title plus haut dans ce fichier : neutralise
   le margin-bottom NEGATIF que styles.css impose a tous les h1..h6, pour
   que le badge ".editor_rating" juste en-dessous ne remonte plus sur ce
   titre (voir le commentaire dans studios/show.blade.php). */
/* Un commentaire editorial sans aucun espace (ou une seule "ligne"
   tres longue tapee d'un bloc) ne pouvait pas se couper : le navigateur
   traitait tout le texte comme un seul mot impossible a scinder, qui
   poussait la boite -- et toute la mise en page a droite de la fiche --
   bien au-dela de la largeur prevue (debordement horizontal visible sur
   toute la page). overflow-wrap force la coupure, meme sans espace, des
   que necessaire : un commentaire normal (avec de vrais mots) n'est pas
   affecte, seul le cas degenere l'est. */
.editor_notes {
    overflow-wrap: anywhere;
}

.titre_sans_marge_negative {
    margin-bottom: 12px;
}

.editor_rating {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    background-color: var(--studio-color);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--main-border-radius);
    margin-bottom: 10px;
}

/* Les deux lignes color: #fff ci-dessous sont necessaires : le CSS
   global du site donne a TOUS les <span> une couleur bleue
   ("span { color: var(--vivid-color); }", styles.css) -- une regle qui
   cible directement l'element l'emporte sur une couleur heritee du
   parent (.editor_rating), meme moins specifique. Sans ca, le chiffre
   s'affichait en bleu vif sur le fond bleu fonce du badge : illisible.
   Signale par Xavier (2026-10-25). */
.editor_rating_valeur {
    font-family: var(--main-font-bold);
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
}

.editor_rating_max {
    font-size: 0.85rem;
    opacity: 0.85;
    color: #fff;
}

/* Demande explicite de Xavier (2026-10-25) : notation d'un studio par
   les utilisateurs a acces complet (0.5 a 5 etoiles, par pas de 0.5) --
   voir studios/show.blade.php, StudioRatingController et public/js/
   notation-studio.js. Technique du double calque (etoiles pleines
   superposees aux etoiles vides, largeur en %) : fonctionne pour
   N'IMPORTE QUELLE valeur, pas seulement les paliers de 0.5 -- important
   ici puisque la moyenne affichee (contrairement a chaque note
   individuelle) n'est, elle, pas forcement un chiffre rond. */
.notation_studio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* Demande explicite de Xavier (2026-10-25) : etoiles 3x plus grandes
   (1.5rem -> 4.5rem). Les deux calques (.notation_etoiles_fond et
   .notation_etoiles_remplies) n'ont pas leur propre font-size : ils
   HERITENT de celui-ci, donc une seule valeur a changer ici suffit a
   grossir tout le widget (texte "etoiles" + zones de clic, qui restent
   en %, donc déjà proportionnelles). */
.notation_etoiles {
    position: relative;
    display: inline-block;
    font-size: 4.5rem;
    line-height: 1;
    letter-spacing: 6px;
}

.notation_etoiles_fond {
    color: var(--table-bg-color);
}

.notation_etoiles_remplies {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--contrast-color);
}

/* Les 10 zones de clic (une demi-etoile chacune) : invisibles,
   superposees aux etoiles, uniquement presentes pour les comptes
   pouvant noter (voir le "@if ($pro)" dans show.blade.php). */
.notation_etoiles_zone {
    position: absolute;
    inset: 0;
    display: flex;
}

.notation_etoile_bouton {
    flex: 1 0 10%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.notation_texte {
    font-size: 0.9rem;
    color: var(--neutral-medium-color);
}

.notation_invite {
    font-size: 0.85rem;
    margin-top: 2px;
}

/* Demande explicite de Xavier (2026-10-25) : "bien equilibre" -- la note
   globale de la redaction, le detail des 5 criteres, et la notation des
   membres doivent former des blocs clairs plutot que des elements
   epars. ".avis_box" est le gabarit commun des deux boites (meme fond,
   meme radius). Lisere de couleur retire le 2026-10-25 (demande
   explicite de Xavier), comme sur .inc_studio_item un peu plus haut sur
   cette page. */
.avis_box {
    background-color: var(--neutral-xtra_light-color);
    border-radius: var(--main-border-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.avis_redaction_haut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.avis_redaction_global {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.avis_redaction_global .editor_rating {
    margin-bottom: 0;
}

.avis_redaction_global_label {
    font-size: 0.75rem;
    color: var(--neutral-medium-color);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
}

/* Demande explicite de Xavier (2026-10-25) : le tableau des criteres
   reste visible meme sans aucune note editoriale -- a la place du badge
   de moyenne (".editor_rating", absent dans ce cas), ce texte prend sa
   place, en phrase normale plutot qu'en petite etiquette majuscule. */
.avis_redaction_pas_de_note {
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: normal;
    font-style: italic;
    white-space: normal;
}

.avis_criteres {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1 1 280px;
    min-width: 220px;
}

.critere_note {
    display: flex;
    align-items: center;
    gap: 10px;
}

.critere_note_label {
    flex: 0 0 110px;
    font-size: 0.82rem;
    color: var(--neutral-medium-color);
}

.critere_note_barre {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--table-bg-color);
}

.critere_note_remplie {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background-color: var(--contrast-color);
}

.critere_note_valeur {
    flex: 0 0 26px;
    text-align: right;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-medium-color);
}

/* La boite "avis_membres_box" contient directement .notation_studio (les
   etoiles) puis, le cas echeant, l'invitation a devenir pro -- elle n'a
   pas besoin de ses propres marges, deja gerees par .notation_studio et
   .notation_invite. */
.avis_membres_box .notation_studio {
    margin-bottom: 0;
}

.avis_membres_box .notation_invite {
    margin-top: 8px;
    margin-bottom: 0;
}

/* En dessous de 480px (telephone) : la colonne de criteres passe sous le
   badge plutot qu'a cote, et le badge se recentre -- sinon, avec flex-wrap
   seul, le badge restait aligne a gauche alors que les criteres,
   descendus en dessous, partaient d'une autre colonne. */
@media (max-width: 480px) {
    .avis_redaction_global {
        align-self: flex-start;
    }
}

/* Demande explicite de Xavier (2026-10-25) : l'avis de la redaction (note
   globale + 5 criteres) et la notation des membres passent dans la
   colonne de GAUCHE, sous les donnees du studio -- plus de largeur
   fixe a respecter ici (contrairement a .listcontainer_01, 470px), les
   deux boites prennent simplement toute la largeur disponible dans
   .result_main_left. */
.result_main_left .avis_box {
    margin-top: 16px;
    margin-right: 20px;
}

/* Correctif (2026-10-25) : deux essais en CSS pur (flexbox stretch) n'ont
   pas marche -- par construction, un flex:grow ne peut QUE faire grandir
   le cote qui a de la place en trop, jamais faire RAPETISSER l'autre en
   dessous de son contenu naturel. Or ce qu'il faut ici est a sens unique
   et peut demander les deux : Xavier veut que ce soit TOUJOURS la boite
   de texte (a droite) qui s'ajuste -- quitte a devenir plus PETITE que
   son contenu naturel (et scroller) si la colonne de gauche (donnees +
   avis + etoiles, jamais modifiee) est plus courte -- jamais l'inverse.
   Impossible a garantir avec du flex seul des les deux sens ; on mesure
   donc en JS la position reelle du bas de ".avis_membres_box" et on fixe
   la hauteur de ".editor_notes" en consequence -- voir alignerNoteEditeur()
   dans notation-studio.js. Les regles ci-dessous ne gerent plus que
   l'etat PAR DEFAUT (avant que le JS ait mesure, ou si JS est
   indisponible) : une hauteur minimale raisonnable, et un scroll si le
   commentaire est trop long pour la hauteur finalement imposee par JS. */
.editor_notes {
    height: auto;
    min-height: 130px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Demande explicite de Xavier (2026-10-25) : la classe et les incitatifs
   cote a cote plutot qu'empiles. La classe reste un simple badge
   compact (flex: 0 0 auto, meme taille qu'avant) ; les incitatifs
   prennent le reste de la largeur disponible. Si l'un des deux est
   absent (pas de classe choisie, ou visiteur non-pro), l'autre occupe
   naturellement toute la ligne -- rien a gerer en plus. */
.classe_et_incitatifs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.classe_et_incitatifs_classe {
    flex: 0 0 auto;
}

.classe_et_incitatifs_incitatifs {
    flex: 1 1 240px;
    min-width: 220px;
}