/* ------------------------------------------------------------------------------
 *
 *  # Styles client Nataïs Agro (portés de la V1 : assets/themes/default/css/custom.css)
 *
 * ---------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------
   Fancytree — icônes

   Le thème Limitless dessine l'arbre avec la police d'icônes Phosphor
   (`content:"\f3eb"`, `--icon-font-family:Phosphor`). La V3 ne charge que le sprite
   SVG — `assets/css/icons/phosphor/` n'est jamais mis en file d'attente — donc tous
   ces glyphes sortaient en caractères manquants (dossiers, fichiers, chevrons,
   attente, erreur).

   On repasse par `assets/css/icons/symbol.svg.php`, qui extrait un `<symbol>` du
   sprite et le renvoie en SVG autonome, avec sa couleur en paramètre : même procédé
   que `.of_elems .dropdown-submenu > .dropdown-item::after`. Les sélecteurs
   reprennent exactement ceux de `components.css` — à spécificité égale, c'est
   `custom.css` qui gagne, `theme_custom` étant mis en file d'attente après
   `components` (`includes/app.php`).
   ---------------------------------------------------------------------------- */

/* géométrie commune : la police est remplacée par une image de fond */
.fancytree-expander:after,
.fancytree-icon:after,
.fancytree-drag-helper-img:after,
.fancytree-drop-before:after,
.fancytree-drop-after:after,
.fancytree-loading .fancytree-expander:after,
.fancytree-statusnode-wait .fancytree-icon:after{
	content:"";
	display:inline-block;
	width:var(--icon-font-size, 14px);
	height:var(--icon-font-size, 14px);
	background-repeat:no-repeat;
	background-position:center;
	background-size:var(--icon-font-size, 14px) var(--icon-font-size, 14px);
}

/* chevrons d'ouverture */
.fancytree-exp-c .fancytree-expander:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-caret-right&fill=rgba(0,0,0,0.5)");
}
.fancytree-exp-cl .fancytree-expander:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-caret-right&fill=rgba(0,0,0,0.5)");
}
.fancytree-exp-cd .fancytree-expander:after, .fancytree-exp-cdl .fancytree-expander:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-caret-right&fill=rgba(0,0,0,0.5)");
}
.fancytree-exp-e .fancytree-expander:after, .fancytree-exp-ed .fancytree-expander:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-caret-down&fill=rgba(0,0,0,0.5)");
}
.fancytree-exp-el .fancytree-expander:after, .fancytree-exp-edl .fancytree-expander:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-caret-down&fill=rgba(0,0,0,0.5)");
}

/* état d'attente et erreur de chargement */
.fancytree-statusnode-error .fancytree-icon:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-warning-circle&fill=%23EF4444");
}
.fancytree-loading .fancytree-expander:after,
.fancytree-statusnode-wait .fancytree-icon:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-spinner&fill=rgba(0,0,0,0.5)");
}

/* nœuds : fichiers (ico-c / ico-e) et dossiers (ico-cf / ico-ef) */
.fancytree-ico-c .fancytree-icon:after,
.fancytree-ico-e .fancytree-icon:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-file-text&fill=rgba(0,0,0,0.5)");
}
.fancytree-has-children.fancytree-ico-c .fancytree-icon:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-file-plus&fill=rgba(0,0,0,0.5)");
}
.fancytree-has-children.fancytree-ico-e .fancytree-icon:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-file-minus&fill=rgba(0,0,0,0.5)");
}
.fancytree-ico-cf .fancytree-icon:after,
.fancytree-ico-ef .fancytree-icon:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-folder&fill=rgba(0,0,0,0.5)");
}
.fancytree-has-children.fancytree-ico-cf .fancytree-icon:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-folder-plus&fill=rgba(0,0,0,0.5)");
}
.fancytree-has-children.fancytree-ico-ef .fancytree-icon:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-folder-minus&fill=rgba(0,0,0,0.5)");
}

/* glisser-déposer */
.fancytree-drop-accept .fancytree-drag-helper-img:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-check-circle&fill=%23059669");
}
.fancytree-drop-reject .fancytree-drag-helper-img:after{
	content:"";
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-warning-circle&fill=%23EF4444");
}

/* Thème sombre : les icônes neutres sont produites en noir translucide — on les
   inverse plutôt que de dupliquer chaque URL. Les icônes déjà colorées (erreur,
   accept / reject) en sont exclues, une inversion en changerait la teinte. */
[data-color-theme=dark] .fancytree-node .fancytree-expander:after,
[data-color-theme=dark] .fancytree-node .fancytree-icon:after{
	filter:invert(1);
}
[data-color-theme=dark] .fancytree-statusnode-error .fancytree-icon:after{
	filter:none;
}

/* En-tête de carte coloré : le chevron de pliage porte `text-body`, dont la couleur est
   posée en `!important` par Bootstrap — il restait sombre sur les fonds `text-bg-*`
   (harvest_compare). Il suit désormais la couleur de texte de l'en-tête.
   `fill` autant que `color` : le chevron est un SVG, et `assets/css/icons.css` colore les
   icônes par `fill` — `color` seul laissait le glyphe à la couleur de lien. */
.card-header[class*="text-bg-"] .card-actions .text-body{
	color:inherit !important;
	fill:inherit !important;
}

/* Lignes DataTables colorées (alpha-*)
   Bootstrap 5 peint le fond sur les cellules (`.table > :not(caption) > * > *` →
   `background-color:var(--table-bg)`) : un fond posé sur le <tr> reste invisible.
   Les cellules des lignes marquées héritent donc du fond de leur ligne.
   Concerne harvest_productivity (essais / bio), contractors, services,
   plots_varieties, publications… */
.table > tbody > tr[class*="alpha-"] > td,
.table > tbody > tr[class*="alpha-"] > th{
	background-color:inherit;
}

/* DataTables `scrollX` — le tfoot de mesure du corps scrollé
   DataTables laisse un thead et un tfoot dans la table du `.dataTables_scrollBody`
   pour caler la largeur des colonnes, et neutralise leurs cellules en ligne
   (`height:0`, paddings et bordures haut/bas à 0). En Bootstrap 3 cela suffisait :
   `.table-bordered` ne bordait que les cellules. Bootstrap 5 borde le `<tr>`
   (`.table-bordered > :not(caption) > * { border-width:1px 0 }`) → chaque ligne du
   tfoot laisse 2px de trait, soit une pile de lignes vides sous le tableau.
   `components.css` corrige déjà le cas du thead, pas celui du tfoot. */
.dataTables_scroll .dataTables_scrollBody .table-bordered > tfoot > *{
	border:none;
}

/* Harvest — jauges dans les colonnes « Ecart » et « % livré »
   (largeurs et couleurs posées en --width / --left / --right / --background
   par assets/js/pages/harvest_productivity.js) */
td.dt-difference,
td.dt-percentage{
	position:relative;
	--right:auto;
	--left:auto;
	--width:0%;
	--background:transparent;
}
td.dt-difference:before{
	content:'';
	position:absolute;
	left:50%;
	width:1px;
	top:0;
	bottom:0;
	background:#ccc;
}
td.dt-difference:after{
	content:'';
	position:absolute;
	left:var(--left);
	right:var(--right);
	width:var(--width);
	top:0;
	bottom:0;
	transition:width 0.5s;
	background:var(--background);
}
td.dt-percentage:before{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	width:33.33%;
	background:rgba(150,150,150,0.05);
}
td.dt-percentage:after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:var(--width);
	transition:width 0.5s;
	background:var(--background);
}

/* select2 dans un `.input-group`
   Le plugin recopie la largeur du `<select>` (`.form-control` → 100%) en style **en ligne** sur
   le conteneur qu'il génère. Dans un `.input-group`, qui est `flex-wrap:wrap`, l'addon et le
   champ ne tiennent alors plus sur une ligne et le select passe dessous (moisture_tables,
   filtre « Filtrer »). Le noyau pose déjà `flex:1 1 auto; min-width:0` sur ce conteneur
   (`components.css:623`), il ne restait qu'à neutraliser la largeur en ligne. */
.input-group > .select2-container{
	width:auto !important;
}

/* En-têtes de tableaux : ne pas reprendre la couleur du fond de page
   `plateforme-active.css:177` peint `.table thead th` en `#f8f6f1` — exactement la couleur que
   la même feuille donne à `.page-content`. Dans une carte, l'en-tête du tableau se confondait
   donc avec l'arrière-plan de la page : la carte ne paraissait plus blanche
   (moisture_tables, où la carte d'un silo n'a ni en-tête ni pied côté producteur) et on ne
   distinguait plus le tableau du fond (harvest_results). On rend la main au mécanisme de
   Bootstrap : `--table-bg` vaut `transparent` par défaut — le blanc de la carte ressort — et
   les lignes marquées `table-light` / `table-secondary` gardent leur teinte.
   La bordure basse de 2px posée par la charte suffit à détacher l'en-tête.
   Spécificité (0,2,1) : `plateforme-active` est mise en file après `theme_custom`, il faut
   passer devant son `.table thead th` (0,1,1). */
.card .table thead th{
	background-color:var(--table-bg);
}

/* Collision de noms entre les deux sélecteurs de date embarqués par la V3
   `components.css:3692` style un sélecteur de date « vanilla » dont la racine s'appelle
   `.datepicker` et qu'il masque par défaut (`.datepicker{display:none}`, révélé par
   `.datepicker.active`). Or le widget d'eonasdan — celui que le projet utilise réellement,
   via `App::enqueueJS('bootstrap_datetimepicker')` — construit son calendrier dans un
   `<div class="datepicker">` qui ne reçoit jamais `.active` : la fenêtre s'ouvrait donc
   **vide** (harvest_trigger, publications, moisture_tables, harvest_monitoring…).
   Le portage avait renommé la classe des champs (`.datepicker` → `.js-datepicker`,
   cf. `.agents/migration-tools/migrate_datepicker_class.php`) mais la collision se produit
   à l'intérieur du balisage généré par le plugin, hors de portée du convertisseur.
   Seule `.datepicker` entre en conflit : `.timepicker` et les `.datepicker-*` du widget
   n'ont pas d'homonyme. */
.bootstrap-datetimepicker-widget .datepicker{
	display:block;
}

/* Mention secondaire du titre de page (`<h4>… <small>n° 00031</small></h4>`)
   Limitless posait `h4 small{font-size:13px}` et Bootstrap 3 les grisait dans les titres.
   Bootstrap 5 n'a gardé que `small{font-size:0.875em}` : le numéro de contrat ressortait
   presque à la taille du titre et en pleine couleur (contract, service_contract). */
.page-title small{
	display:inline-block;
	margin-left:10px;
	font-size:0.8125rem;
	font-weight:400;
	color:var(--gray-500);
}

/* Groupe d'actions de l'en-tête de page (`.heading-elements`)
   Classe Limitless V1 (positionnement absolu dans `.panel-heading`) : elle n'a aucun style en
   V3, où le placement vient du `d-flex justify-content-between` de `.page-header-content`.
   Restait qu'elle n'espaçait plus ses propres enfants — deux boutons d'en-tête sortaient
   collés (varieties, publications, campaigns…). On la déclare simplement comme rangée flex ;
   `gap` reprend la valeur de l'utilitaire `gap-2` employé ailleurs dans les gabarits. */
.heading-elements{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--spacer-2);
}

/* Espacement entre cartes empilées
   Le convertisseur a réécrit les `panel panel-default` de la V1 en `card`, mais Limitless
   posait `margin-bottom:20px` sur `.panel` alors que `.card` de Bootstrap 5 n'a **aucune**
   marge. Les 56 `class="card"` nus des gabarits client se retrouvaient donc collés les uns
   aux autres (varieties : les deux tableaux soudés ; moisture_tables : la pile de silos ;
   colonne de gauche du tableau de bord producteur…). On rétablit la valeur de la V1 —
   `--spacer` vaut précisément 1.25rem, soit les 20px d'origine.
   Les cartes qui portent déjà un utilitaire `mb-*` gardent le leur, il est `!important`. */
.content .card{
	margin-bottom:var(--spacer);
}

/* Carte « Filtres » — ses listes déroulantes doivent passer AU-DESSUS de la carte suivante
   Second volet du correctif des `selectpicker` de la carte « Filtres » : le premier est la
   synchronisation de `card-collapsed` dans `assets/js/custom.js`, qui supprime le
   `overflow:hidden` rognant le menu. Une fois le menu libre de déborder de sa carte, il
   rencontre la carte suivante : Bootstrap 5 pose `position:relative` sur `.card` **sans**
   `z-index`, donc deux cartes sœurs se peignent dans l'ordre du DOM et tout ce que la
   suivante contient de positionné recouvre le menu — notamment les colonnes figées de
   DataTables FixedColumns (`.dtfc-fixed-left` / `.dtfc-fixed-right`, `position:sticky` +
   `z-index:1` dans `components.css`), posées dès que le tableau défile horizontalement.
   `z-index:3` passe devant le `z-index:2` le plus haut des extensions DataTables et reste
   très en dessous des couches d'interface (menus BS5 1000, modales 1055). */
.card-filter{
	z-index:3;
}

/* ------------------------------------------------------------------------------
   Liseuse de documents contractuels (`.document-reader`)

   Conditions générales, conditions annuelles, contrat de service : le document est injecté
   dans une boîte à hauteur fixe que le producteur doit faire défiler jusqu'en bas pour
   débloquer la case de validation (`data-scroll-lock`, cf. `contract.js` et
   `service_contract.js`). Sans `height` + `overflow-y`, la boîte ne défile jamais et la case
   reste **définitivement désactivée** : ce n'est pas qu'un problème d'affichage.

   Règles reprises de la V1 (`custom.css`, section « contracts »), couleurs passées aux
   variables du thème. Les classes de tableau (`spaced`, `border-table`, `centered`,
   `overflow`, `separator`, `signature`) viennent des gabarits PDF et sont conservées telles
   quelles.
   ---------------------------------------------------------------------------- */

.document-reader{
	height:50vh;
	min-height:300px;
	overflow-y:auto;
	padding:20px;
	box-sizing:border-box;
	background:var(--card-bg);
	border:2px solid var(--gray-500);
	border-radius:var(--border-radius);
}
/* talon de fin : garantit que l'évènement `scroll` atteint bien le bas */
.document-reader:after{
	content:'';
	height:20px;
	display:block;
}
.document-reader p{
	text-align:justify;
}
.document-reader h1{
	text-align:center;
}
.document-reader table{
	border-collapse:collapse;
	table-layout:fixed;
	word-wrap:break-word;
}
.document-reader .spaced td{
	padding:0.5mm 5mm;
}
.document-reader .border-table td,
.document-reader .border-table th{
	border:1px solid var(--body-color);
	padding:1mm 1mm;
}
.document-reader .centered td,
.document-reader .centered th{
	text-align:center;
	padding:1mm 1mm;
}
.document-reader .overflow td{
	padding:0.5mm 0mm;
}
.document-reader td.separator,
.document-reader th.separator{
	border-top:none;
	border-bottom:none;
}
.document-reader .signature{
	padding-top:5mm;
}

/* Chevron de repli des `<legend>`
   La V1 le posait discret et calé à droite (`core.css` : `legend .control-arrow{float:right;
   color:#999}`, survol `#333`). Le noyau V3 ne lui donne que la rotation à l'état replié
   (`components.css:88`) : il restait donc noir et collé au texte. Le `float` est sans effet
   dans les `<legend>` passés en `d-flex` — ceux-là calent le chevron avec `ms-auto` — mais
   rattrape ceux qui portent encore le balisage d'origine (campaigns, varieties_availability).

   ⚠ Les icônes de la V3 sont des SVG colorés par la propriété `fill` (`assets/css/icons.css`),
   pas par `color` : sans le `fill` ci-dessous le chevron reste bleu, hérité du
   `a{fill:var(--link-color)}` de la ligne 40 de cette feuille. */
legend a.control-arrow{
	float:right;
	color:var(--gray-500);
	fill:var(--gray-500);
	cursor:pointer;
}
legend a.control-arrow:hover{
	color:var(--body-color);
	fill:var(--body-color);
}

/* Séparateur sous les légendes de section
   Bootstrap 3 bordait toute légende (`legend{border-bottom:1px solid #e5e5e5}`) ; Bootstrap 5
   a supprimé cette règle. Là où les légendes sont les seuls repères entre les sections — pas
   d'en-tête de carte, pas de séparateur — le contenu venait se coller au titre. On rétablit le
   filet de la V1 :
   * `#modal-varieties-availability` : les trois blocs repliables de la modale ;
   * `#form-contract-signature` : les fieldsets imbriqués de l'assistant de contractualisation
     (pages `contract` et `service_contract`, qui partagent cet identifiant de formulaire). Les
     légendes de premier niveau, celles des étapes, sont masquées par stepy (`legend:false`,
     cf. `_description()` du plugin) : la règle ne les concerne pas à l'écran.
   Les pages du noyau en sont volontairement exclues : leurs légendes sont déjà détachées par
   un `card-body border-bottom`, un second trait ferait double emploi. */
#modal-varieties-availability legend,
#form-contract-signature legend{
	padding-top:0.75rem;
	padding-bottom:0.75rem;
	border-bottom:1px solid var(--border-color);
}

/* ------------------------------------------------------------------------------
   Assistant pas-à-pas (stepy)

   Le plugin `assets/js/plugins/forms/wizards/stepy.min.js` construit la barre d'étapes à
   partir des `<fieldset>`/`<legend>` du formulaire (contract, service_contract,
   harvest_trigger). Ses styles vivaient dans le `components.css` du thème Limitless V1 ; le
   thème V3 ne les a pas. Règles reprises de la V1 (components.css « Stepy wizard » +
   surcharges client), couleurs passées aux variables du thème.

   Les pastilles utilisaient des glyphes Icomoon (`\ed6c`, `\e913`) : la police n'existe plus
   en V3, on repasse par `symbol.svg.php` comme pour les icônes Fancytree ci-dessus.
   ---------------------------------------------------------------------------- */

.stepy-step{
	padding:0;
}
.stepy-header{
	list-style:none;
	padding:0;
	margin:0;
	display:table;
	table-layout:fixed;
	width:100%;
}
.stepy-header li{
	cursor:pointer;
	display:table-cell;
	vertical-align:top;
	width:auto;
	padding:20px 0;
	text-align:center;
	position:relative;
}
.stepy-header li span{
	display:block;
	margin-top:10px;
	color:var(--gray-500);
}
/* trait de liaison entre deux pastilles */
.stepy-header li:before,
.stepy-header li:after{
	content:'';
	display:block;
	position:absolute;
	top:43px;
	width:50%;
	height:2px;
	background-color:var(--primary);
	z-index:9;
}
.stepy-header li:before{ left:0; }
.stepy-header li:after{ right:0; }
.stepy-header li:first-child:before,
.stepy-header li:last-child:after{
	content:none;
}
/* pastille : étape franchie (fond plein + coche) */
.stepy-header li div{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:38px;
	height:38px;
	line-height:34px;
	text-align:center;
	font-size:0;
	color:var(--white);
	background-color:var(--primary);
	border:2px solid var(--primary);
	border-radius:50%;
	z-index:10;
}
.stepy-header li div:after{
	content:'';
	display:inline-block;
	width:16px;
	height:16px;
	vertical-align:middle;
	background-repeat:no-repeat;
	background-position:center;
	background-size:16px 16px;
	background-image:url("../../../css/icons/symbol.svg.php?icon=ph-check&fill=%23ffffff");
	transition:all 0.15s ease-in-out;
}
/* étapes à venir : pastille vide, numéro visible */
.stepy-header li.stepy-active:after,
.stepy-header li.stepy-active ~ li:before,
.stepy-header li.stepy-active ~ li:after{
	background-color:var(--gray-200);
}
.stepy-header li.stepy-active ~ li div{
	font-size:14px;
	color:var(--gray-500);
	background-color:var(--card-bg);
	border-color:var(--border-color);
}
.stepy-header li.stepy-active ~ li div:after{
	content:none;
}
/* étape courante : pastille creuse marquée d'un point */
.stepy-header li.stepy-active div{
	cursor:auto;
	color:var(--primary);
	background-color:var(--card-bg);
	border-color:var(--primary);
}
.stepy-header li.stepy-active div:after{
	background-image:none;
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:var(--primary);
}
.stepy-header li.stepy-active span{
	color:var(--body-color);
}
.stepy-navigator{
	text-align:right;
}
.stepy-navigator .btn+.btn{
	margin-left:5px;
}
@media (max-width: 769px){
	.stepy-header{
		margin-bottom:20px;
	}
	.stepy-header li{
		display:block;
		float:left;
		width:50%;
		padding-bottom:0;
	}
	.stepy-header li:first-child:before,
	.stepy-header li:last-child:after{
		content:'';
	}
	.stepy-header li.stepy-active:last-child:after{
		background-color:var(--primary);
	}
}
@media (max-width: 480px){
	.stepy-header li{
		width:100%;
	}
	.stepy-header li.stepy-active:after{
		background-color:var(--primary);
	}
}

/* ------------------------------------------------------------------------------
   Tableau de bord Producteur

   Ces blocs de la V1 (`assets/themes/default/css/custom.css`, lignes 487-556) n'avaient
   pas été portés : l'encart « RÉFÉRENT » de l'en-tête, la liste d'actualités et celle des
   prochains RDV sortaient sans mise en forme. Le gabarit garde les mêmes noms de classes,
   seules les couleurs en dur passent aux variables du thème pour suivre le mode sombre.
   ---------------------------------------------------------------------------- */

/* Encart référent (point of contact) */
.heading-poc{
	display:flex;
	align-items:stretch;
	background:var(--card-bg);
	border-radius:var(--border-radius);
	border:1px solid rgba(var(--success-rgb), 0.4);
	box-shadow:0 0 3px rgba(var(--success-rgb), 0.4);
}
.poc-title{
	display:flex;
	align-items:center;
	padding:5px 10px;
	background:var(--gray-100);
	border-right:1px solid var(--border-color);
	border-top-left-radius:var(--border-radius);
	border-bottom-left-radius:var(--border-radius);
}
.poc{
	display:flex;
	align-items:center;
	column-gap:10px;
	padding:5px 10px;
}
/* remplace `.img-sm` de la V1 (36px !important), classe Limitless absente en V3 */
.poc-thumbnail img{
	width:36px;
	height:36px;
	object-fit:cover;
}

/* Mes actualités */
#last-posts .post+.post{
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid var(--border-color);
}
#last-posts .post-date{
	float:right;
	font-style:italic;
	color:var(--gray-500);
}
#last-posts .post-title{
	margin-top:0;
	margin-bottom:5px;
	font-weight:600;
}
#last-posts .post-desc:not(:empty){
	margin-bottom:5px;
}

/* Mes prochains RDV */
#next-events .event{
	display:flex;
	align-items:stretch;
	justify-content:space-between;
}
#next-events .event+.event{
	border-top:1px solid var(--border-color);
}
#next-events .event-date{
	width:30%;
	display:flex;
	align-items:center;
	padding:10px;
	background:var(--gray-200);
}
#next-events .event:nth-child(2n+1) .event-date{
	background:var(--gray-100);
}
#next-events .event-content{
	width:70%;
	padding:10px;
}
#next-events .event-title{
	margin-top:0;
	margin-bottom:5px;
	font-weight:600;
}

/* En dessous de md, l'en-tête passe en colonne : l'encart référent suit (V1, ligne 709) */
@media (max-width: 768px){
	.heading-poc{
		flex-direction:column;
	}
	.poc-title{
		border-right:none;
		border-bottom:1px solid var(--border-color);
		border-top-right-radius:var(--border-radius);
		border-bottom-left-radius:0;
	}
	.poc{
		text-align:left;
	}
}

/* `.well` — encadré de regroupement de la V1
   Classe Bootstrap 3 supprimée en BS4/5 : les blocs concernés (silos de `modal-silos`,
   encadrés de `contract`) avaient perdu bordure, fond et marges et se confondaient les uns
   avec les autres. On restitue la règle BS3 (`padding:19px; margin-bottom:20px;
   border:1px solid #ddd`) avec les variables du thème, pour suivre le mode sombre.
   Les utilitaires posés à côté (`mb-3`, `pb-3`, `p-2`, `alpha-*`, `border-warning`)
   portent `!important` et continuent de l'emporter au cas par cas. */
.well{
	padding:var(--spacer);
	margin-bottom:var(--spacer);
	background-color:var(--gray-100);
	border:1px solid var(--border-color);
	border-radius:var(--border-radius);
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);
}